vue2的缺陷

下班回家的途中,一个问题困扰我很久,在vue2中为什么不能给对象直接赋值?
若是使用其他的的api又觉得麻烦,于是就有了这篇博客!!!

数组的部分操作没有响应式

  • push(),pop(),shift(),unshift(),splice(),sort(),reverse()

因为这7个api会修改原数组,换句话来说,只要不修改原数组的api都没有响应式.

一、直接添加属性的问题

我们从一个例子开始

定义一个p标签,通过v-for指令进行遍历

然后给botton标签绑定点击事件,我们预期点击按钮时,数据新增一个属性,界面也 新增一行

<p v-for="(value,key) in item" :key="key">
    {{ value }}
p>
<button @click="addProperty">动态添加新属性button>

实例化一个vue实例,定义data属性和methods方法


const app = new Vue({
    el:"#app",
   	data:()=>{
       	item:{
            oldProperty:"旧属性"
        }
    },
    methods:{
        addProperty(){
            this.items.newProperty = "新属性"  // 为items添加新属性
            console.log(this.items)  // 输出带有newProperty的items
        }
    }
})

点击按钮,发现结果并不是我所想的,数据虽然更新了(console打印出了新属性),但页面并没有更新

二、原理分析

下面来分析一下

由于vue2是用过Object.defineProperty实现数据响应式

const obj = {}
Object.defineProperty(obj, 'foo', {
        get() {
            console.log(`get foo:${val}`);
            return val
        },
        set(newVal) {
            if (newVal !== val) {
                console.log(`set foo:${newVal}`);
                val = newVal
            }
        }
    })
}

当我们访问foo属性或者设置foo值的时候都能够触发setter与getter

obj.foo   
obj.foo = 'new'

但是我们为obj添加新属性的时候,却无法触发事件属性的拦截

obj.bar  = '新属性'

原因是一开始obj的foo属性被设成了响应式数据,而bar是后面新增的属性,并没有通过Object.defineProperty设置成响应式数据

三、解决方案

Vue 不允许在已经创建的实例上动态添加新的响应式属性

若想实现数据与视图同步更新,可采取下面三种解决方案:

  • Vue.set()
  • Object.assign()
  • $forcecUpdated()

自我认为 三种方法中了解一个即可

Vue.set()

格式:

  fn2(){
      // 添加一个属性+有响应式
      // vue提供的API
      // $set(对象,属性名,属性值)
      this.$set(item, this.items.newProperty, '新属性')
    },

具体参考 https://cn.vuejs.org/v2/api/#Vue-set

你可能感兴趣的:(vue.js,javascript,vue.js,前端,vue,前端框架)