Vue.js中易被忽略的知识点

2018-04-18 本文已影响112人该帐号已被查封_才怪

一、通过data中的数组变量的下标去修改数组的值,数据已经被修改了,但是不触发updated函数,视图不更新；

    <p @click="changeTestSet1">{{testSet[0]}}</p>
    <p @click="changeTestSet2">{{testSet[1]}}</p>
    <p>{{testSet[2]}}</p>
<script>
 export default {
data(){
return {
 testSet: [1, 2, 3],
},
methods:{
      changeTestSet1() {
        this.testSet[0] = 44;
        console.log('第一项变l')
      },
      changeTestSet2() {
        // this.testSet[2] = 55;
        this.$set(this.testSet, 1, 55);
        console.log('第二项变l')
      },
}

}
}
</script>

二、vue中检测不到对象属性的添加和删除

image.png

此时可以使用$set 方法解决或者将新对象赋给原有对象即可；
另外，其实也不能完全简单粗暴的说 vue监测不到对象新属性的添加，具体可见下面的例子

<template>
    <div>
      <button @click="changeObjKey">
        改变
      </button>
    <div>
      只添加一个新属性:
      <span> obj.a----- {{obj.a}}</span> <br>
      <span> obj.b---- {{obj.b}}</span> <br>
      <span> obj.c---- {{obj.c}}</span> <br>
    </div>

    <div>
      修改一个旧属性并添加一个新属性:
      <span> obj1.a----- {{obj1.a}}</span> <br>
      <span> obj1.b------ {{obj1.b}}</span>
    </div>
    </div>
</template>

export default {
    data() {
        return {
        obj: {
          a: '我是obj里的a的值',
        },
        obj1: {
          a: '我是obj1里的a的值',
        },
        };
    },
    methods: {
      changeObjKey() {
        this.obj.b = '我是obj里的新属性b';
        console.warn(this, 'this')
        // 只要以下其中的一个语句启用 obj.b就会在DOM中显示出来
        // this.obj.a = '我是obj里的新a值';
        // 发现obj.a更新了 不会立即更新视图层 而是检查其他属性是否有更新 有更新的话 最终一起更新至视图层（改变DOM）
        // this.$set(this.obj, 'c', '我是obj里的新属性c')
        // 发现obj.c更新了 不会立即更新视图层 而是检查其他属性是否有更新 有更新的话 最终一起更新至视图层（改变DOM）
        // this.obj1.a = '我是obj1里的aaaaa';
        // 发现obj1.a更新了 不会立即更新视图层 而是检查整个vue中的'data'是否有更新 有更新的话 最终一起更新至视图层（改变DOM）
      },
    },
};

三、当组件在<keep-alive>内被切换,它的activated和deactivated这两个生命周期钩子函数将会被对应执行；

activated: keep-alive组件激活时调用
deactivated: keep-alive组件停用时调用

四、vue的计算属性computed默认只有getter,需要使用getter的时候需要自己加一个setter

computed: {
   fullName: {
        // getter
        get: function () {
          return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
  }    
},