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

2023-12-24 06:07:21

一、计算属性

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>

文章来源:https://blog.csdn.net/weixin_43520586/article/details/134658672
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。