一、Vue中的属性!
属性的特性:是否可读可写;是否可被遍历;是否可被删除。
描述对象来描述这些特性---描述对象的特性都是true
Object.getOwnPropertyDescriptor(对象,"属性")
返回描述对象:configurable 是否可被删除
enumerable 是否可被枚举
value 对应的值
writable 是否可被改写
Object.defineProperty(对象,属性,描述对象)
定义对象的属性,可以添加新的属性,也可以改变已有的属性
返回描述对象:writable 是否可被改写 false
configurable 是否可被删除 false
enumerable 是否可被枚举 false
Object.defineProperty(对象,属性,{【存取器 getter/setter】
get(){return 属性值} 【获取属性值】
set(newValue){} 【设置属性值】
enumerable: false,
configurable: false,
})
代理:data中数据在初始化的时候会被内部设置为getter/setter,过程叫做代理
一开始的时候就要规划好数据,之后再添加新属性的时候,并不会触发视图更新,因为没有被代理
调用两个方法
Vue.set(对象,属性,值)
实例.$set(对象,属性,值)
数组的方法
数组的方法是变异方法
vue中改写了---'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'
数组使用下标改变,不会响应
表单元素处理
把数据渲染在input上,用input事件监听变化,改变数据---双向数据绑定
封装了语法糖,合并了绑定和监听
指令v-model
语法:v-model="数据"
做了两件事情:
1. 把数据绑在value上
2. 监听input事件改变数据
二、计算属性!
模板中不要对数据处理过多的逻辑。
在模板中对数据处理,可以把逻辑抽离在两个地方:methods方法 & computed计算属性
methods方法:
在方法中处理逻辑,最终产生一个结果
computed计算属性:
计算属性是一个属性,值是由一个方法执行后的返回值,执行是vue内部处理的
computed和methods中依赖于data中的值。
当data中的值更新后,会重新计算,computed只会计算一次,就可以在模板中多次使用。
data computed methods 属性都会放在实例上