关于vue.js:Vue3全家桶升级指南一composition-API

31次阅读

共计 4559 个字符,预计需要花费 12 分钟才能阅读完成。

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 只能获取到新值。

正文完
 0