• 作者:老汪软件技巧
  • 发表时间:2024-08-29 00:04
  • 浏览量:

如果,你发现自己需要在Vue中做一次强制更新,99.99%的情况,是你在某个地方做错了事

情况一:Vue无法检测实例被创建时不存在于data中的变量

原因:由于 Vue 会在初始化实例时对data中的数据执行getter/setter转化,所以变量必须在data对象上存在才能让Vue将它转化成响应式的

例如:

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

解决方法:

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

情况二:Vue不能检测到data中对象的动态添加属性和删除属性

动态给对对象新增属性或删除属性是不会触发视图更新的,Vue识别不到

例如:

new Vue({
    data: {
        obj:{
            id: 1
        }
    },
    template: '
{{ obj.message }}
'
}) 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')

情况三:变量为数组时,不能通过索引值直接修改或者赋值,也不能修改数组的长度

我们在修改数组数据的时候,应该使用push()、pop()、shift()、unshift()、sort()、reverse()等原生的方法去操作数据,因为Vue可以直接检测到这些方法所带来的数组数据变化。

例如:

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)

情况四: 异步获取接口数据,DOM数据不发生变化

原因:Vue在更新 DOM 时是异步执行的。当数据变化时,Vue不会立即更新DOM,而是等到下一次事件循环再执行更新。如果需要立即更新视图,可以使用Vue.nextTick(callback)方法

例如1:

修改完数据之后想立刻操作 DOM 元素,就需要使用nextTick

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

解决办法:

'example'>{{message}}
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' // 文字颜色变成红色 })

例如2:如果想要在created()中操作DOM,也需要使用nextTick,因为在此阶段,DOM还未渲染

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

情况五: 循环嵌套层级太深,视图不更新

页面怎么变了_改变页面数据但不刷新页面_

当嵌套太深时,页面也可能不更新,此时可以让页面强制刷新

因为Vue修改数据是异步执行的,所以是不不会立即更新,会等到下一次DOM更新循环结束后,统一更新发生在这一次循环中修改的数据,然后同步视图更新,所以我们可以修改后自己手动强制更新视图。

this.$forceUpdate()迫使Vue实例重新(render)渲染虚拟DOM,注意并不是重新加载组件。

结合 Vue 的生命周期,调用 $forceUpdate 后只会触发 beforeUpdate 和 updated 两个钩子函数,不会触发其他的钩子函数。

它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。

// 官方说如果你现在的场景需要用forceUpdate方法,那么99%是你的操作有问题
this.$forceUpdate()

情况六: 路由参数变化时,页面不更新(数据不更新)

例如:

'app'> <ul> <li><router-link to='/home/foo'>To Foorouter-link>li> <li><router-link to='/home/baz'>To Bazrouter-link>li> <li><router-link to='/home/bar'>To Barrouter-link>li> ul> <router-view>router-view>

const Home = {
    template: `
{{message}}
`
, 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 })

上段代码中,我们在路由构建选项routes中配置了一个动态路由'home/:name',他们共用了一个路由组件Home,这代表他们复用 RouterView

当进行路由切换时,页面只会渲染第一次路由匹配到的参数,之后再进行路由切换时,message是没有变化的。

解决方法:

通过watch 监听 $route的变化

const Home = {
    template: `
{{message}}
`
, 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 })

给绑定key属性,这样Vue就会认为这是不同的

弊端:如果从 /home 跳转到 /user 等其他路由下,我们是不用担心组件更新问题的,所以这个时候key属性是多余的。

    
'app'> ... 'key'>

情况七:变量通过赋值来定义的

在 Vue 中有两种类型的变量:响应式变量和非响应式变量。

在后端获取的变量通常是响应式变量,也就是说它们会被 Vue 检测到变化并同步到页面上,如果你修改了这些响应式变量,页面会随之改变。

而通过赋值来定义的变量,通常是非响应式变量,如果你修改了这些非响应式变量,Vue并不会监测到他们的变化,所以页面不会改变。

如果你需要是一个非响应式变量变成响应式变量,可以使用Vue.set方法或者数组的变异方法(例如push、splice等)

例1:Vue.set(对象,添加的key, 属性值)

    Vue.set
    // 这个是直接用在Vue身上的。例如:Vue.set(对象, 添加的key, 属性值)
    // 常见于 xx.js文件中
    // 注意: js文件中,需要引入vue,比如 import Vue from vue

例2:this.$set(对象,添加的key, 属性值)

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

this.$set 是 Vue.js 中的一个方法,用于解决Vue不能检测到对象属性的添加或删除的问题。当需要动态地向响应式对象添加一个属性,并确保这个新属性同样是响应式的(即当期值改变时,视图也会更新),可以使用this.$set

在Vue3中,this.$set已被移除,因为Vue3使用了proxy来实现响应式,这样在数据变化后能够更精确的检测到属性的添加和删除。