vue3 CompositionAPI

标签：attr   lan   lis   put   写法   books   template   asc   卸载   

CompositionAPI

起源

逻辑复用，是对vue2.0Mixin的优化，以函数的形式封装公共逻辑，它通过显式的返回一个对象，让开发人员能在组件中直接了解到被引入的字段

函数

setup(props,context){
    // props 响应式，可用props.attrs获取到值，es6解构会消除其响应式值，vue3提供了一个toRefs全局方法来解决这个问题
    // 可在es6解构后依然具有相应性
    const {attrs} = toRefs(props);
    // attrs 非响应式对象 ，slots组件插槽（非响应式对象） emit触发事件（方法）
    const{attrs, solts, emit} = context;
    const name:ref("gggg"); // 转换为响应式变量
    const list = ref([]); //通过ref方法将普通变量转为响应式变量
    // 变量 取值/改值 list.value
    
    // 生命周期函数
    onMounted( () => {
    });
    onUpdate(() => {
    });
    onBeforeUnmount(() => {
    })
    
    // vue写法
    // computed: {
    // booksMessage() {
    //     return this.books.length > 0?‘YES‘:‘NO‘;
    // }
    // }
    const bookMessage = computed(() => book.value.length > 0 ? ‘YES‘:‘NO‘);
    
    // watch: {
    //     question(newQuestion, oldQuestion) {
    //     }
    // }
    watch(question,(newValue, oldValue) => {
    })

    return {    // 返回的字段都可以在组件的其余部分使用，变成组件内的变量和方法
    // 还可以返回渲染函数， 组件中定义的template将会失效
    }
}

实际项目中，可以将上面的逻辑单独封装成一个函数并在setup中调用，最终返回函数的返回值
vue生命周期created(创建) -> mounted(加载) -> updated(更新) -> unmounted(卸载)
在setup内部，this不是当前组件实例的引用

setup函数是在解析其它组件选项之前，也就是beforeCreate之前执行

beforeCreate() {}
created() {}
setup() {}
mounted(){}

可以将setup内的部分逻辑抽离出来，单独作成js文件，多返回值用{}提取

vue3 CompositionAPI

标签：attr   lan   lis   put   写法   books   template   asc   卸载   

原文地址：https://www.cnblogs.com/wukun-sole/p/14486621.html