一、computed计算属性使用
复杂data的处理方式
在末班中可以直接通过 插值语法 显示一些data中的数据
但是 在某些情况,我们需要对数据进行一些转换后 再显示,或者需要将多个数据结合起来 进行展示
如 我们需要对多个data数据进行运算,三元运算符来决定结果 数据进行某种转化后 显示
在模版中使用 表达式 可以非常方便实现,但是设计它们的初衷是用于 简单的运算
在模版中放入太多的逻辑会让 模版过重难以维护
并且如果多个地方都使用到,那么会有大量重复的代码
我们有办法将他们抽离出去嘛?
可以 其中一种方式就是将逻辑抽取到一个method中,放到methods的options中;
但是 这种做法有一个直观的弊端,就是所有的data使用过程都会变成一个 方法的调用
另外一种方式就是使用计算属性 computed;
二、computed和method区别
认识计算属性 computed
什么是计算属性?
对于 任何包含响应式数据的复杂逻辑 你都应该使用 计算属性;
计算属性将被混入到组件实例中
所有getter和setter的this上下文自动绑定为组件实例
计算属性的用法:
选项: computed
类型:{[key:string]:Function|{get:Function,set:Function}}
计算属性的缓存
计算属性是有缓存的
计算属性会基于它们的 依赖关系进行缓存
在数据不发生变化时 计算属性是不需要重新计算的
如果依赖的数据发生变化,在使用时 计算属性依然会重新进行计算
三、computed的set和get
计算属性的setter和getter
计算属性在大多数情况下,只需要一个getter方法即可,所以我们会将计算属性直接写成一个函数
但是 如果我们确实想设置计算属性的值呢?
JavaScript computed: { // 语法糖的写法 // fullname() { // return this.firstName + " " + this.lastName // } fullname: { get() { return this.firstName + " " + this.lastName }, set(value) { const names = value.split(" ") this.firstName = names[0] this.lastName = names[1] } } },
四、侦听器watch选项使用
认识侦听器watch
什么是侦听器?
开发中 我们在data返回的对象中定义了数据,这个数据通过 插值语法等方式绑定到了template中
当数据变化时 template会自动进行更新来显示最新的数据
但在某些情况下,我们希望在代码逻辑中监听某个数据的变化,这个时候就需要侦听器watch完成
侦听器的用法如下:
选项:watch
类型:{[key:string]:string|Function|Object|Array}
JavaScript // 侦听数据 watch: { // 1 默认有两个参数 传递过来,newValue/oldValue message(newValue, oldValue) { console.log("message数据发生了变化", newValue, oldValue); }, info(newValue, oldValue) { // 2 如果是对象类型 那么拿到的是Proxy(代理对象) // console.log("info数据发生了变化", newValue, oldValue); // 3 获取原生的对象 方法1 // console.log({ ...newValue }) // 一个新对象 // 拿到原始对象 console.log(Vue.toRaw(newValue)) } }
侦听器watch的配置选项
先看例子:
当我们点击按钮的时候 会修改info.name的值
这个时候我们使用watch来侦听info 可以侦听到吗? 答:不可以
这是因为 默认情况下,watch只侦听info的引用变化,对于内部属性的变化是不会做出响应的
这个时候我们可以使用一个 选项deep 进行更深层的侦听
注意 前面我们说过 watch里面侦听的属性对应的也可以是一个Object
还有另一个属性 是希望一开始的就会立即执行一次:
这个时候我们使用 immediate选项;
这个时候无论后面数据是否发生改变,侦听的函数都会有限执行一次
五、侦听器watch其他写法
侦听器watch的其他方式(一)
侦听器watch的其他方式(二)
Vue3文档中 没有提到 但是Vue2文档中有提到的是侦听对象的属性:
JavaScript 'info.name':function(newValue,oldValue){ console.log(newValue,oldValue) }
还有一种方式就是使用$watch的API
我们可以在created的生命周期中,使用this.$watchs来侦听
第一个参数 是要侦听的源
第二个参数 是侦听的回调函数callback
第三个参数 是额外的其他选项 如 deep immediate
JavaScript // 生命周期回调函数:当前的组件被创建时自动执行 // 一般在该函数中 会进行网络请求 created() { // 自动执行 // ajax/fetch/axios请求 // this.message = [] console.log("created"); this.$watch("message", (newValue, oldValue) => { console.log(newValue, oldValue); }, { deep: true }) }
