欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue3.0之组合API(Composition API)

程序员文章站 2022-06-06 23:37:51
...

vue3.0组合API

Setup

知识点:

1、setup执行时机
beforeCreate:组件刚创建,data和methods还未初始化完成
setup
created:组件刚创建,data和methods已经初始化完成
2、setup注意事项:
由于在执行setup函数时,还未执行created生命周期方法,所 以setup函数中,是无法使用data和methods,为了避免错误的使用,vue实例将setup函数中的this修改成了undefined。另外setup函数只能是同步的不能是异步的。

ref

1、什么是ref
ref是来实现响应式数据的方法,由于reactive必须传递一个对象,所以导致在实际开发中若想让某个变量实现响应式会比较麻烦,所以vue3提供了ref方法来实现变量的简单监听;
2、本质:
ref底层的本质还是reactive,系统会自动根据我们给ref传入的只将它转换成ref(x)==>reactive({value:x})
3、ref注意点:
在vue中使用ref的值不用通过value来获取,而在JS中使用ref的值必须通过value获取
下面是ref的使用 代码片

注意:ref只能监听简单类型的变化,
不能监听复杂类型的变化(数组/对象)  
复杂类型使用reactive监听,示例:
 import {reactive} from 'vue';
 let s = reactive({a:[]})
//App1.vue 
<template>
    <div>
        <p>{{count}}</p>
        <input @click="myFn" type="button" value="加">
    </div>
</template>

<script> 
import {ref} from 'vue';

export default {
    setup(){
        //定义初始值为0的变量,要使用ref方法赋值,直接赋值的话变量改变不会更新UI
        let count = ref(0);
        //在组合API中,若想定义方法,不用定义到methods中,直接在API内定义即可
        //触发myFn事件改编count直接更新UI层
        function myFn(){
            console.log(count);
            count.value+=1;
        }
        /**
         * 注意点:
         * 组合API中定义的变量或方法若想在外部使用,必须return出去
        */
        return {count,myFn}
    }
}

reactive

知识点

1、什么是reactive:
reactive是vue3中提供的实现响应式数据的方法
在vue2中响应式数据是通过defineProperty来实现的
而在vue3中响应式数据是通过ES6的Proxy来实现的
2、reactive注意点:
reactive参数必须是对象(json/arry)
如果给reactive传递了其他对象
默认情况下修改对象,界面不会自动更新
若想更新,可通过重新赋值的方式
一个简单的todolist示例:

//App2.vue
<template>
  <div>
    <form>
      <input type="text" v-model="stObj.st.id" />
      <input type="text" v-model="stObj.st.name" />
      <input type="text" v-model="stObj.st.age" />
      <input type="button" value="添加" @click="add" />
    </form>
    <ul>
      <li v-for="(item, index) in state.arr" :key="item.id" @click="del(index)">
        {{ item.id }}----{{ item.name }}----{{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script>
//为使代码更清晰,可以将组合API中的方法统一放置单独的文件中引入使用 
import { useRemoveStudent,useAddStudent } from './utils/index';

export default {
  setup() {
    let { state, del } = useRemoveStudent();
    let { stObj, add } = useAddStudent(state);
    return { state, del, stObj, add };
  },
};     
</script>

//index.js
import { reactive } from "vue";

export function useRemoveStudent() {
    let state = reactive({
        arr: [{
                id: 1,
                name: "zs",
                age: 12
            },
            {
                id: 2,
                name: "ls",
                age: 13
            },
            {
                id: 3,
                name: "ww",
                age: 14
            },
        ],
    });

    function del(i) {
        state.arr = state.arr.filter((item, index) => i != index);
    }

    return {
        state,
        del
    };
}

export function useAddStudent(state) {
    let stObj = reactive({
        st: {
            id: "",
            name: "",
            age: "",
        },
    });

    function add(e) {
        e.preventDefault();
        const st = Object.assign({}, stObj.st);
        state.arr.push(st);
        stObj.st.id = "";
        stObj.st.name = "";
        stObj.st.age = "";
    }

    return {
        stObj,
        add
    };
}
小结:

1、Composition API(组合API)可以和 Option API(methods等)混合使用;
2、Composition API本质(组合API/注入API)将Composition API中的数据注入到Option API当中