Vue3学习笔记--Options API

CSDN话题挑战赛第2期
参赛话题：学习笔记

1 computed计算属性使用

复杂data的处理方式

在末班中可以直接通过 插值语法 显示一些data中的数据

但是 在某些情况,我们需要对数据进行一些转换后 再显示,或者需要将多个数据结合起来 进行展示

如 我们需要对多个data数据进行运算,三元运算符来决定结果 数据进行某种转化后 显示

在模版中使用 表达式 可以非常方便实现,但是设计它们的初衷是用于 简单的运算

在模版中放入太多的逻辑会让 模版过重难以维护

并且如果多个地方都使用到,那么会有大量重复的代码

我们有办法将他们抽离出去嘛?

可以 其中一种方式就是将逻辑抽取到一个method中,放到methods的options中;

但是 这种做法有一个直观的弊端,就是所有的data使用过程都会变成一个 方法的调用

另外一种方式就是使用计算属性 computed;

2 computed和method区别

认识计算属性 computed

什么是计算属性?

对于 任何包含响应式数据的复杂逻辑 你都应该使用 计算属性;

计算属性将被混入到组件实例中

  所有getter和setter的this上下文自动绑定为组件实例

计算属性的用法:

选项: computed

类型:{[key:string]:Function|{get:Function,set:Function}}

计算属性的缓存

计算属性是有缓存的

计算属性会基于它们的 依赖关系进行缓存

在数据不发生变化时 计算属性是不需要重新计算的

如果依赖的数据发生变化,在使用时 计算属性依然会重新进行计算

3 computed的set和get

计算属性的setter和getter

计算属性在大多数情况下,只需要一个getter方法即可,所以我们会将计算属性直接写成一个函数

但是 如果我们确实想设置计算属性的值呢?

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]
        }
    }
},

4 侦听器watch选项使用

认识侦听器watch

什么是侦听器?

开发中 我们在data返回的对象中定义了数据,这个数据通过 插值语法等方式绑定到了template中

当数据变化时 template会自动进行更新来显示最新的数据

但在某些情况下,我们希望在代码逻辑中监听某个数据的变化,这个时候就需要侦听器watch完成

侦听器的用法如下:

选项:watch

类型:{[key:string]:string|Function|Object|Array}

// 侦听数据
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选项;

这个时候无论后面数据是否发生改变,侦听的函数都会有限执行一次

5 侦听器watch其他写法

侦听器watch的其他方式(一)

 

侦听器watch的其他方式(二)

Vue3文档中 没有提到 但是Vue2文档中有提到的是侦听对象的属性:

'info.name':function(newValue,oldValue){
    console.log(newValue,oldValue)
}

还有一种方式就是使用$watch的API

我们可以在created的生命周期中,使用this.$watchs来侦听

第一个参数 是要侦听的源

第二个参数 是侦听的回调函数callback

第三个参数 是额外的其他选项 如 deep immediate

// 生命周期回调函数:当前的组件被创建时自动执行
// 一般在该函数中 会进行网络请求 
created() { // 自动执行
    // ajax/fetch/axios请求
    // this.message = []
    console.log("created");
    this.$watch("message", (newValue, oldValue) => {
        console.log(newValue, oldValue);
    }, { deep: true })
}