Composition API

使用Composition API实现todoList

以前我们可能想到在data中定义数据，但是有了Composition API 之后我们会定义setup函数

【例子】

const app = Vue.createApp({
    setup(){
        const { ref,reactive } = Vue;
        const inputValue = ref('');
        const list = reactive([]);
        const handleInputChange = (e)=>{
            inputValue.value = e.target.value
        }
        const handleSubmit = ()=>{
            list.push(inputValue.value)
            inputValue.value = ''
        }
        return {
            inputValue,
            handleInputChange,
            handleSubmit,
            list
        }
    },
    template: `
        <input :value="inputValue" @input="handleInputChange"/>
        <button @click="handleSubmit">提交</button>
        <ul>
            <li v-for="(item,index) in list" :key="index">{{item}}</li>
        </ul>
    `
})
const vm = app.mount('#root')

步骤：

1. 双向数据绑定获取到input框中输入的值
2. 点击提交按钮，将输入框中的值放到数组中
3. 列表循环展示这个数组中的数据

【运行结果】

对代码进行封装和优化

现在setup函数阅读起来会很别扭骂，我们分析一下代码：其实setup函数主要做了两件事：

1.往list中放数据

2.改变input输入的内容，相应的改变inputValue中的值

我们不妨将setup中的代码拆分成两个部分

把处理inputValue的逻辑放到处理inputValue的函数中

把对list相关的处理放到处理list的函数中

【例子】

// 关于inputVal操作的内容进行了封装
const inputRelevantEffect = () => {
    const { ref } = Vue;
    const inputValue = ref('');
    const handleInputChange = (e) => {
        inputValue.value = e.target.value
    }
    return {
        inputValue,
        handleInputChange
    }
}

// 关于list操作的内容进行了封装
const listRelevantEffect = () => {
    const { reactive } = Vue;
    const list = reactive([]);
    const addItemToList = (item) => {
        list.push(item)
    }
    return { addItemToList, list }
}

const app = Vue.createApp({
    setup() {
        // 流程的调度中转
        const { addItemToList, list } = listRelevantEffect()
        const { inputValue, handleInputChange } = inputRelevantEffect()
        return {
            addItemToList, list,
            inputValue, handleInputChange
        }
    },
    template: `
        <input :value="inputValue" @input="handleInputChange"/>
        <button @click="() => addItemToList(inputValue)">提交</button>
        <ul>
            <li v-for="(item,index) in list" :key="index">{{item}}</li>
        </ul>
    `
})
const vm = app.mount('#root')

好处是setup中没有了this(app实例)，不用纠结this指向谁

Composition API中的computed

使用

1. computed接收函数作为参数

【例子】

const app = Vue.createApp({
    setup() {
        const { ref, computed } = Vue;
        const count = ref(0);
        const handleClick = () => {
            count.value += 1
        }
        const countAddFive = computed(() => {
            return count.value + 5
        })
        return { count, handleClick,countAddFive }
    },
    template: `
        <div>
          <div @click="handleClick">cout: {{ count }}</div>    
          <div @click="handleClick">计算属性: {{ countAddFive }}</div>    
        </div>
    `
})
const vm = app.mount('#root')

【运行结果】

可以发现当count的值发生变化的时候，计算属性countAddFive会跟着也发生变化

2.computed接收对象作为参数

这个对象中接受set方法(设置值)和get方法(获取值)

基础的使用

【例子】

const app = Vue.createApp({
    setup() {
        const { ref, computed } = Vue;
        const count = ref(0);
        const handleClick = () => {
            count.value += 1
        }
        let countAddFive = computed({
            get: () => {
                return count.value + 5
            },
            set: () => {
                count.value = 10
            }
        })
        setTimeout(() => {
            countAddFive.value = 100
        }, 2000);
        return { count, handleClick, countAddFive }
    },
    template: `
        <div>
          <div @click="handleClick">cout: {{ count }}</div>    
          <div @click="handleClick">计算属性: {{ countAddFive }}</div>    
        </div>
    `
})
const vm = app.mount('#root')

【运行结果】

【备注】

• 虽然计时器中将countAddFive的值修改为100，但是修改值的时候调用set的逻辑，因此count的值变为10，默认情况计算属性countAddFive会执行get方法，因此计算属性返回结果15

• 注意： 计算属性countAddFive返回的值是被ref包裹的对象，如果想修改值需要从value中取，即countAddFive.value=100

• set函数中可以通过参数，获取到修改的值

如果count不是基础数据类型，也是一样的

【例子】

const app = Vue.createApp({
    setup() {
        const { reactive, computed } = Vue;
        const countObj = reactive({count: 0});
        const handleClick = () => {
            countObj.count += 1
            console.log( countObj.count);
        }
        let countAddFive = computed({
            get: () => {
                return countObj.count + 5
            },
            set: (param) => {
                countObj.count = param - 5
            }
        })
        setTimeout(() => {
            countAddFive.value = 100
        }, 2000);
        return { countObj, handleClick, countAddFive }
    },
    template: `
        <div>
          <div @click="handleClick">cout:{{ countObj.count }}</div>    
          <div>计算属性: {{ countAddFive }}</div>    
        </div>
    `
})

const vm = app.mount('#root')

【运行结果】