项目实践经验，vue实例的属性和方法，前端经典面试题详解

<button @click=“updateName()”>改变属性值

<button @click=“addAge()”>增加一个属性

<button @click=“deleteAge()”>删除一个属性

姓名{{user.name}}

年龄：{{user.age}}

$set 总结 （对象，数组）

注意：当给响应式数据对象（或数组）添加新属性，视图不更新的处理方法。

let vm = new Vue({

el :‘#app’,

data:{

a:{school:2,room:‘’} , // 1,声明时写

arr:[50]

}

});

vm.$set(vm.a{,}^{\prime }roo{m}^{\prime }，8）//2.用$set添加

对于要设很多属性的话，可以替换原对象，

vm.a = {…this.a,room:‘xxx’} //3 赋值新的对象(改变堆内存)

如果响应式数据为数组，数组元素改变监听不到，常规方法比如

vm.arr[0] = 100

vm.arr.length = 5

1.使用内置方法：pop push shift unshift sort reserve splice 能改变数组的方法才行

2.$set：vm.$set(vm.arr,1,‘hello’)

3.赋值新的数组：vm.arr=[…arr,100,200]

如：

vm.arr.reverse();

vm.arr = vm.arr.map(item = >item*=3);

2.3 vm.$watch( expOrFn, callback, [options] )

观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。

示例：

姓名{{user.name}}

年龄：{{user.age}}