VUE基础回顾2

1.响应式

　　vue修改了每个添加到data上的对象，当该对象发生变化时vue会收到通知，从而实现响应式。对象的每个属性都会被替换为getter,setter方法。

　　有两种方式实现data对象的监听

　　　　(1)脏检查：通过存储这个对象副本，然后比较两者，但这种方法并不高效。

　　　　(2)使用Objectf.defineProperty()，以下是vue的基本思路

const storedData = {};
storedData.useId = data.useId
Object.defineProperty(data,'userId',{
    get(){
        return storedData.useId;
    },
    set(value){
        console.log('user ID changed!');
        storedData.useId = value;
    },
    configurable:true,
    enumerable:true
})

　　　深入了解可查阅vue官方文档。

　　如何动态添加响应式属性：

　　　　getter/setter方法实在初始化时添加的，只有已经存在的属性是响应式的，为对象直接添加新属性，不会使这个属性成为响应式的；

　　　　因为es5的限制，vue不能检测到对象的属性添加或删除,只有在data对象上的属性才能使他为响应式的。

　　　　(1)最简单的办法是在初始化时定义这个属性

　　　　(2)使用object.assign()来创建一个新的对象然后覆盖原有的对象，当需要一次性更新多个属性时，这是最有效的方法

const vm = new Vue({
    data: {
        formData: {
            username: "四海潮生"
        }
    }
})
vm.formData = Object.assign({},vm.formData,{
    name:'some user'
})

　　　　(3)vue官方提供的Vue.set(),组件内部this.$set；

　　　　　　两者区别：1.在vue的源码中两者都使用了set函数。区别在于vue.set()是将set函数绑定在vue的构造函数上，this.$set()是将set函数绑定在vue的原型上。

　　　　　　　　　　　2.vue.set可是设置示例创建后添加的属性，this.$set只能设置实例创建后存在的属性。

　　设置数组的元素：

　　　　不能直接使用索引来设置数组的元素。

　　　　　可以使用arr.splice()方法来移除旧元素，添加新元素。也可以使用vue.set(arr,2,'bob')

　　　　 .splice()方法还可以设置数组的长度，但是只能缩短，不能增加。在原生JS中，可以设置长短，自动让空元素填充数组，这种方式不适用于data对象中的数组，因为vue不能检测到该操作对数组的任何更改。

2.双向数据绑定v-model

　　主要用于表单元素，如input，在input中输入值，绑定在data上的属性值也会随之更新，input也会接收data内的初始值

3.动态设置HTML v-html

　　v-html的值不管是什么内容都会被直接输出到页面上，不会转义。

　　慎用此指令，不要将用户输入或用户修改的内容置于v-html中，因为可能将自己暴露在xss的风险中，可能一不小心就允许用户在网站上执行恶意脚本

猜你喜欢