Vue数据变了但页面没有变的几种情况及解决方法

目录

• 情况一：Vue无法检测实例被创建时不存在于data中的变量
• 情况二：Vue不能检测到data中对象的动态添加属性和删除属性
• 情况三：变量为数组时，不能通过索引值直接修改或者赋值，也不能修改数组的长度
• 情况四： 异步获取接口数据，DOM数据不发生变化
• 情况五： 循环嵌套层级太深，视图不更新
• 情况六： 路由参数变化时，页面不更新（数据不更新）
• 情况七：变量通过赋值来定义的

new Vue({
    data: {},
    template: '<div>{{message}}</div>'
})
this.message = 'Hello World' // 由于'message'不是响应式的，页面不会发生变化

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' // 不是响应式的
delete this.obj.id //不是响应式的

// 动态添加 - Vue.set
Vue.set(this.obj, 'id', 001)
// 动态添加 - this.$set
this.$set(thsi.obj, 'id', 002)

// 动态添加多个 - Object.assign
// 代替 Object.assign(this.obj, { a:1, b:2})
this.obj = Object.assign({}, this.obj, { a:1, b:2})

// 动态移除 - Vue.delete
Vue.delete(this.obj, 'name')
// 动态移除 - this.$delete
this.$delete(this.obj, 'name')

new Vue({
    data: {
        items: ['a', 'b', 'c']
    }
})
this.items[1] = 'x' // 不是响应式的
this.items[3] = 'd' // 不是响应式的
this.items.length = 2 // 不是响应式的

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

// Array.prototype.splice
// 修改操作： splice(你要修改的元素索引位置, 1, 修改后的值)
// 添加操作： splice(你要添加到那个元素的后面就写到那个元素的索引+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' // 更改数据
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' // 更改数据
// 使用 Vue.nextTick(callback) callback将在 DOM 更新完成后被调用
Vue.nextTick(function() {
    vm.$el.textContent === 'new message' // true
    vm.$el.style.color = 'red' // 文字颜色变成红色
})

created(){
    this.$nextTick(() => { // 不使用this.$nextTick()会报错
        that.$refs.btn.innerHTML = 'created中更改了按钮内容'
    })
}

// 官方说如果你现在的场景需要用forceUpdate方法，那么99%是你的操作有问题
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
    // 这个是直接用在Vue身上的。例如：Vue.set(对象, 添加的key, 属性值)
    // 常见于 xx.js文件中
    // 注意： js文件中，需要引入vue，比如 import Vue from vue

    this.$set
    // 这个是用在vm或vc实例上的，比如vue文件中，
    // this.$set(要添加属性的对象，要添加属性的名称, 要设置的新属性值)
    // 常见于 xx.vue文件中