vue计算属性

ps笔记

已于 2022-07-28 14:01:42 修改

阅读量254

点赞数 1

文章标签： java 前端 javascript

于 2022-07-28 13:18:50 首次发布

本文链接：https://blog.csdn.net/lv_suri/article/details/126032844

版权

计算属性：

1，定义：要用的属性不存在，要通过已有的属性计算得来

2.原理：底层就是借助了objcet.defineproperty方法提供的getter和setter

3.get函数什么时候执行？

（1）初次读取时会执行一次

（2）当依赖的数据被发生改变时会被再次调用

4，优势methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

5.备注：计算属性最终会出现在vm上，直接读取使用即可

如果计算属性要被修改那务必写set函数去响应修改，且set中要引起计算时依赖的数据发生变化

    计算属性：
       1，定义：要用的属性不存在，要通过已有的属性计算得来
       2.原理：底层就是借助了objcet.defineproperty方法提供的getter和setter
       3.get函数什么时候执行？
        （1）初次读取时会执行一次
        （2）当依赖的数据被发生改变时会被再次调用
        4，优势methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
        5.备注：计算属性最终会出现在vm上，直接读取使用即可
            如果计算属性要被修改那务必写set函数去响应修改，且set中要引起计算时依赖的数据发生变化


<body>
   <div id="root">
    姓：<input type="text" v-model="firstName">
    名：<input type="text" v-model="lastName">
    全名：<span>{{fullName}}</span>
   </div>
   
</body>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.0.0-alpha.1/axios.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      new Vue ({
        el:"#root",
        data:{
            firsName:"林",
            lasrName:"尚"
        },
        //需要写一个全新的配置项
        methods:{},
        computed:{
            fullName:{
                //get有什么作用，当又人读取fullName时，get就会被调用，且返回值读作fullName的值
            get(){
                console.log("get 被调用了");
                return this.firsName + '-' + this.lastName
            },
            //get什么时候被调用？ 当fullName被修改时
            set(value){
                console.log("set",value);
                const arr = value.split("-")
                this.firsName=arr[0]
                this.lasrName=arr[1]
            }
            }
        }
      })
    </script>

</html>

6如果只考虑读取时，可用简写

//完整写法：
            // fullName: {
            //     get() {
            //         console.log("get 被调用了");
            //         return this.firsName + '-' + this.lastName
            //     },
            //     set(value) {
            //         console.log("set", value);
            //         const arr = value.split("-")
            //         this.firsName = arr[0]
            //         this.lasrName = arr[1]
            //     }

        //简写：
                fullName(){
                    console.log("get 被调用了");
                    return this.firsName + '-' + this.lastName
                }

做个小案例：用到三元表达式

<body>
    <div id="root">
      <h1>今天的天气{{isHot ? '超热':'凉爽'}}</h1>
      <button>切换天气</button>
    </div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.0.0-alpha.1/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:'#root',
        data:{
            isHot:true,
        }
    })
</script>

</html>

ps笔记

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue计算属性

2.原理底层就是借助了objcet.defineproperty方法提供的getter和setter。如果计算属性要被修改那务必写set函数去响应修改，且set中要引起计算时依赖的数据发生变化。4，优势methods实现相比，内部有缓存机制（复用），效率更高，调试方便。5.备注计算属性最终会出现在vm上，直接读取使用即可。1，定义要用的属性不存在，要通过已有的属性计算得来。（2）当依赖的数据被发生改变时会被再次调用。（1）初次读取时会执行一次。6如果只考虑读取时，可用简写。......
复制链接

扫一扫