new Vue({
    data: {},
    template: '<div>{{message}}</div>'
})
this.message = 'Hello World' // 由于'message'不是響應(yīng)式的，頁面不會發(fā)生變化

new Vue({
    data: {
        message: ''
    },
    template: '<div>{{message}}</div>'
})
this.message = 'Hello World'

new Vue({
    data: {
        obj:{
            id: 1
        }
    },
    template: '<div>{{ obj.message }}</div>'
})
this.obj.message = 'hello' // 不是響應(yīng)式的
delete this.obj.id //不是響應(yīng)式的

// 動態(tài)添加 - Vue.set
Vue.set(this.obj, 'id', 001)
// 動態(tài)添加 - this.$set
this.$set(this.obj, 'id', 002)

// 動態(tài)添加多個(gè) - Object.assign
// 代替 Object.assign(this.obj, { a:1, b:2})
this.obj = Object.assign({}, this.obj, { a:1, b:2})

// 動態(tài)移除 - Vue.delete
Vue.delete(this.obj, 'name')
// 動態(tài)移除 - this.$delete
this.$delete(this.obj, 'name')

碼new Vue({
    data: {
        items: ['a', 'b', 'c']
    }
})
this.items[1] = 'x' // 不是響應(yīng)式的
this.items[3] = 'd' // 不是響應(yīng)式的
this.items.length = 2 // 不是響應(yīng)式的

// Vue.set
Vue.set(this.items, 4, 'd')
// this.$set
this.$set(this.items, 4, 'd')

// Array.prototype.splice
// 修改操作： splice(你要修改的元素索引位置, 1, 修改后的值)
// 添加操作： splice(你要添加到那個(gè)元素的后面就寫到那個(gè)元素的索引+1, 0, 要添加的值)
// 刪除操作： splice(你要刪除的元素的索引, 1)
this.items.splice(indexOfItem, 4, 'd')

// 修改長度
this.items.splice(3)

<div id='example'>{{message}}</div>
var vm = new Vue({
    el: '#example',
    data: {
        message: '123'
    }
})
vm.message = 'new message' // 更改數(shù)據(jù)
vm.$el.textContent === 'new message' // false
vm.$el.style.color = 'red' // 頁面沒有變化

<div id='example'>{{message}}</div>
var vm = new Vue({
    el: '#example',
    data: {
        message: '123'
    }
})
vm.message = 'new message' // 更改數(shù)據(jù)
// 使用 Vue.nextTick(callback) callback將在 DOM 更新完成后被調(diào)用
Vue.nextTick(function() {
    vm.$el.textContent === 'new message' // true
    vm.$el.style.color = 'red' // 文字顏色變成紅色
})

created(){
    this.$nextTick(() => { // 不使用this.$nextTick()會報(bào)錯
        that.$refs.btn.innerHTML = 'created中更改了按鈕內(nèi)容'
    })
}

this.$forceUpdate()

this.$forceUpdate()

<div id='app'>
    <ul>
        <li><router-link to='/home/foo'>To Foo</router-link></li>
        <li><router-link to='/home/baz'>To Baz</router-link></li>
        <li><router-link to='/home/bar'>To Bar</router-link></li>
    </ul>
    <router-view></router-view>
</div>
const Home = {
    template: `<div>{{message}}</div>`,
    data() {
      return {
          message: this.$route.params.name
      }      
    }
}

const router = new VueRouter({
    mode: 'history',
    routes: [
        {path: '/home', component: Home},
        {path: '/home/:name, component: Home}
    ]
})

new Vue({
    el: '#app',
    router
})

const Home = {
    template: `<div>{{message}}</div>`,
    data() {
      return {
          message: this.$route.params.name
      }      
    },
    watch: {
        '$route': function(){
            this.message = this.$route.params.name
        }
    }
},

const router = new VueRouter({
    mode: 'history',
    routes: [
        {path: '/home', component: Home},
        {path: '/home/:name, component: Home}
    ]
})

new Vue({
    el: '#app',
    router
})

   <div id='app'>
        ...
        <router-view :key='key'></router-view>
    </div>

Vue.set
    // 這個(gè)是直接用在Vue身上的。例如：Vue.set(對象, 添加的key, 屬性值)
    // 常見于 xx.js文件中
    // 注意： js文件中，需要引入vue，比如 import Vue from vue

this.$set
    // 這個(gè)是用在vm或vc實(shí)例上的，比如vue文件中，
    // this.$set(要添加屬性的對象，要添加屬性的名稱, 要設(shè)置的新屬性值)
    // 常見于 xx.vue文件中

<template v-for="item in arr"
    :key="item.id"
     #[`${item.label}-header`]
   >
    <xxx />
</template>