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 } = Vue

      createApp({
        data() {
          return { mydata: 'testdata' }
        },
        methods: {
          getMydata() {
            let data = '普通方法：' + this.mydata
            console.log(data)
            return data
          }
        },
        computed: {
          getData() {
            let data = '计算属性：' + this.mydata
            console.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 } = Vue
      createApp({
        data() {
          return {
            datalist: ['abcd123', 'qwaaer', '123qws'],
            inputText: ''
          }
        },
        computed: {
          myDataList() {
            return this.datalist.filter(
              item => item.indexOf(this.inputText) > -1
            )
          }
        }
      }).mount('#app')
</script>