Composition API及新的computed

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. 列表循环展示这个数组中的数据

运行结果

Composition API及新的computed

对代码进行封装和优化

现在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会跟着也发生变化

Composition API及新的computed

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')

运行结果

Composition API及新的computed

【备注】

  • 虽然计时器中将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')

运行结果

Composition API及新的computed

原文链接:https://juejin.cn/post/7245658681730777147 作者:一直酷下去

(0)
上一篇 2023年6月17日 上午11:13
下一篇 2023年6月18日 上午10:06

相关推荐

发表回复

登录后才能评论