vue3(五)-基础入门之计算属性

一、计算属性

1.计算属性与普通方法的的区别：

计算属性在需要渲染数据时调用一次，而后将结果缓存起来。只有计算属性所依赖的数据发生改变时才会重新调用函数，否则每次渲染相同的数据都只会从缓存中读取。
普通方法在每次数据需要渲染时都会调重新调用函数

<div id="app"><p>{{ getMydata() }}</p><p>{{ getData }}</p><p>---------------------</p><p>{{ getMydata() }}</p><p>{{ getData }}</p><p>---------------------</p><p>{{ getMydata() }}</p><p>{{ getData }}</p></div><script>const { createApp, ref } = VuecreateApp({data() {return { mydata: 'testdata' }},methods: {getMydata() {let data = '普通方法：' + this.mydataconsole.log(data)return data}},computed: {getData() {let data = '计算属性：' + this.mydataconsole.log(data)return data}}}).mount('#app')
</script>

在这里插入图片描述

从截图可以看出：控制台只输出一次计算属性，输出3次普通方法

2.计算属性-模糊查询

<div id="app"><!-- 模糊查询 --><input type="text" v-model="inputText" /><ul><li v-for="item in myDataList">{{ item }}</li></ul>
</div><script>const { createApp, ref } = VuecreateApp({data() {return {datalist: ['abcd123', 'qwaaer', '123qws'],inputText: ''}},computed: {myDataList() {return this.datalist.filter(item => item.indexOf(this.inputText) > -1)}}}).mount('#app')
</script>