Vue3全家桶升级指南一composition API

Posted 前端无忧网

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue3全家桶升级指南一composition API相关的知识,希望对你有一定的参考价值。

1、setup()

vue3中的composition API中最重要的就是setup方法了,相当于组件的入口,所有的composition API都必须放到setup()中的使用。

setup是在组件实例初始化之前执行的(beforeCreated之前),是整个组件的入口函数,这个时候数据和方法还没有进行挂载,因此在setup中this并不会执行当前组件实例,也不能通过this获取组件中的数据和方法了。

在模板中使用到的变量和方法必须在setup中return出来,才能使用。

export default {
    setup(){
        let name="张三"
        return {name}//必须在这里return,模板中才能使用过
    }
}

setup中的参数
上面已经说过,因为setup是在beforeCreate之前执行的,所以setup中的this并不会指向当前组件实例,this的值为undefined,那么我们怎么和父子组件通信呢(之前可以通过this.$emit触发)?这时就需要用到setup的参数了。

setup有两个参数,第一个是props,父组件传递给当前组件的prop都在这个参数对象中,第二个参数是上下文context,里面包含后attrs,emit,slots,这几个参数的用法就和vue2中的大同小异了,这里不做过多赘述。

2、ref用来定义基础类型的响应式数据

在setup中直接定义的变量不是响应式的,如果需要定义基础类型的响应式变量,需要使用ref来定义

import {ref} from "vue"
export default {
    setup(){
        let name = \'张三\';
        setTimeout(() => {
            name = \'李四\';
            console.log(name);//这里的改变了,但是视图并不会更新
        }, 2000);
        return { name };
    }
}
import {ref} from "vue"
export default {
    let name = ref(\'张三\');
        setTimeout(() => {
            name.value = \'李四\';
            console.log(name.value); //李四
        }, 2000);
        return { name };
}   

需要注意的是,通过ref定义的变量,在js中使用的时候需要通过.value来获取或者设置值,但是在模板中使用的时候不需要加.value,vue内部已经帮我们处理了。

通过ref获取dom元素或者组件实例

在vue2中要获取dom元素或者组件实例,直接在dom元素或者组件上添加ref="refName",然后在js中通过this.$refs.refName就可以获取了。在vue3中,使用方式略有不同。

  1. 直接在dom元素或者组件上添加ref="refName"
  2. 在setup中定义ref,初始值为null,let refName=ref(null),注意变量的名字一定要和dom或者组件上的ref名字保持一致。
  3. 在js中通过refName.value获取dom元素或者组件实例
  4. 注意,需要在setup总return使用到的ref变量
<template>
  <div ref="name">张三</div>
  <button @click="change">add</button>
  <hr />
</template>

<script>
import { ref } from \'vue\';
export default {
    setup() {
        let name = ref(null);
        const change = () => {
            console.log(name.value);
            name.value.innerText = \'李四\';
        };
        return { name, change };
    },
};
</script>

3、reactive用来定义引用类型的响应式数据

import { reactive } from \'vue\';
export default {
    setup() {
        let obj = reactive({ name: \'张三\', age: 18 });
        setTimeout(() => {
            obj.name = \'李四\';
            console.log(obj); //李四
        }, 2000);
        return { obj };
    },
};

在模板中直接通过{{obj.name}}就可以访问数据了

4、computed计算属性

创建只读的计算属性

import {ref,computed} from "vue"
export default {
    setup(){
        let count=ref(0)
        let newCount=computed(()=>count.value+10)
        return {count,newCount}
    }
}

创建可读可写的计算属性,在computed中传入一个对象,通过设置get和set方法创建可读写的计算属性。

import { ref, computed } from \'vue\';
export default {
    setup() {
        let count = ref(1);
        let newCount = computed({
            get: () => count.value + 100,
            set: val => (count.value = val - 1),
        });
        let change = () => (newCount.value += 100);//给计算属性赋值会触发set
        return { count, newCount, change };
    },
}

5、watch监听

监听ref类型的单个数据

import { ref, computed, watch } from \'vue\';
export default {
    setup() {
        let count = ref(1);
        let newCount = computed({
            get: () => count.value + 100,
            set: val => (count.value = val - 1),
        });
        let change = () => (newCount.value += 100);
        watch(count, (newVal, oldVal) => {
            console.log(newVal, oldVal);
        });
        return { count, newCount, change };
    },
};

监听ref类型的多个值

import { ref, watch } from \'vue\';
export default {
    setup() {
        let name = ref(\'张三\');
        let age = ref(18);

        setTimeout(() => {
            name.value = \'李四\';
            age.value = 22;
        }, 2000);

        watch([name, age], ([newName, newAge], [oldName, oldAge]) => {
            console.log(newName, newAge); //李四 22
            console.log(oldName, oldAge); //张三 18
        });
        return { name, age };
    },
};

监听reactive类型的单个值

import { reactive, watch } from \'vue\';
export default {
    setup() {
        let obj = reactive({ name: \'张三\', age: 18 });
        setTimeout(() => {
            obj.name = \'李四\';
        }, 2000);

        watch(
            () => obj.name,
            (newVal, oldVal) => {
                console.log(newVal, oldVal); //李四 张三
            }
        );
        return { obj };
    },
};

监听reactive类型的多个值

import { reactive, watch } from \'vue\';
export default {
    setup() {
        let obj = reactive({ name: \'张三\', age: 18 });
        setTimeout(() => {
            obj.name = \'李四\';
            obj.age = 22;
        }, 2000);

        watch(
            [() => obj.name, () => obj.age],
            ([newName, newAge], [oldName, oldAge]) => {
                console.log(newName, newAge); //李四 22
                console.log(oldName, oldAge); //张三 18
            }
        );
        return { obj };
    },
};

watch添加配置项
在vue2中watch如果需要添加配置就需要传入一个对象,来配置immediate和deep,在vue3中的watch同样可以在第三个参数里添加配置

import { ref, watch } from \'vue\';
export default {
    setup() {
        let name = ref(\'张三\');
        let age = ref(18);

        setTimeout(() => {
            name.value = \'李四\';
            age.value = 22;
        }, 2000);

        watch(
            [name, age],
            ([newName, newAge], [oldName, oldAge]) => {
                console.log(newName, newAge);
                console.log(oldName, oldAge);
            },
            {
                immediate: true,
                deep: true,
            }
        );
        return { name, age };
    },
};

6、watchEffect监听

import { ref, watch, watchEffect } from \'vue\';
export default {
    setup() {
        let name = ref(\'张三\');
        let age = ref(18);

        setTimeout(() => {
            name.value = \'李四\';
            age.value = 22;
        }, 2000);

        watchEffect(() => {
            console.log(name.value);
            console.log(age.value);
        });
        return { name, age };
    },
};

关闭监听

创建监听的时候可以用一个变量来接收watch或者watchEffect函数的返回值,然后在需要停止监听的地方调用这个匿名函数stop(),就可以关闭了

import { ref, watch, watchEffect } from \'vue\';
export default {
    setup() {
        let name = ref(\'张三\');
        let age = ref(18);

        setTimeout(() => {
            name.value = \'李四\';
            age.value = 22;
        }, 2000);
        setTimeout(() => {
            stop();//在这里关闭监听后,在4秒后就不会再打印信息了
            name.value = \'李四2\';
            age.value = 222;
        }, 4000);

        let stop = watchEffect(() => {
            console.log(name.value);
            console.log(age.value);
        });
        return { name, age };
    },
};

watchEffect和watch的区别

  1. watch默认是惰性的,只有当监听的变量发生改变时才会执行,watchEffect不是惰性的,组件初始化的时候就会执行,改变时也会执行。
  2. watch需要指定要监听的变量(ref和reactive类型的变量略不同),watchEffect不需要指定,在回调中使用到的响应式变量都会监听,当这些变量改变时,回调都会执行。
  3. watch可以再改变时获取到新值和旧值,watchEffect只能获取到新值。

以上是关于Vue3全家桶升级指南一composition API的主要内容,如果未能解决你的问题,请参考以下文章

VueVue全家桶Vue3

VueVue全家桶Vue3

Vue3.0全家桶最全入门指南 - vue3.0新特性 (2/4)

Vue3.0全家桶最全入门指南 - 快速搭建 (1/4)

Vue3.0全家桶最全入门指南 - 快速搭建 (1/4)

助你上手Vue3全家桶之Vue3教程