解决Vue数据更新了但页面没有更新的问题

var vm = new Vue({
  data:{},
  // 页面不会变化
  template: '<div>{{message}}</div>'
})
vm.message = 'Hello!' // `vm.message` 不是响应式的

var vm = new Vue({
  data: {
    // 声明 a、b 为一个空值字符串
    message: '',
  },
  template: '<div>{{ message }}</div>'
})
vm.message = 'Hello!'

var vm = new Vue({
  data:{
    obj: {
      id: 001
    }
  },
  // 页面不会变化
  template: '<div>{{ obj.message }}</div>'
})
vm.obj.message = 'hello' // 不是响应式的
delete vm.obj.id       // 不是响应式的

//动态添加 -- vue.set
Vue.set(vm.obj,propertyName,newValue);
//动态添加 -- vm.$set
vm.$set(vm.obj,propertyName,newValue);
//动态添加多个
// 代替Object.assign(this.obj,{a:1,b:2})
this.obj = Object.assign({},this.obj,{a:1,b:2});
//动态移除--vm.$delect
Vue.delete(vm.obj,propertyName);
//动态移除 --vm.$delete
vm.$delete(vm.obj,propertyName);

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的

//Vue.set
Vue.set(vm.items,indexOfItem,newValue);
//vm.$set
vm.$set(vm.items,indexOfItem,newValue);
//Array.prototype.splice
vm.items.splice(indexOfItem,1,newValue);

var arr = [1, 2, 3, 4]
arr.forEach(function(item, index) {
    Object.defineProperty(arr, index, {
    set: function(value) {
      console.log('触发 setter')
      item = value
    },
    get: function() {
      console.log('触发 getter')
      return item
    }
  })
})
arr[1] = '123'  // 触发 setter
arr[1]          // 触发 getter 返回值为 "123"
arr[5] = 5      // 不会触发 setter 和 getter

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items.length = 2 // 不是响应性的

vm.items.splice(newLength)

<div id="example">{{message}}</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
vm.$el.style.color = 'red' // 页面没有变化

var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
//使用Vue.nextTick(callback) callback将在DOM更新完成后被调用
Vue.nextTick(function(){
	vm.$el.textContent === 'new message'  //true
	vm.$el.style.color = 'red' //文字颜色变成红色
})

<!-- 页面显示：我更新啦！ -->
<div id="example">{{message.text}}</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: {},
  }
})
vm.$nextTick(function () {
  this.message = {}
  this.message.text = '我更新啦！'
})

this.message = {};
this.message.text = '我更新啦！'

vm.$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
})

<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
	 }
  }
}
...
new Vue({
  el: '#app',
  router
})

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