Vue (3) — 计算属性、监视属性(侦听属性)、深度监视

最新推荐文章于 2024-03-22 17:39:14 发布

吃不到棒棒糖的小熊

最新推荐文章于 2024-03-22 17:39:14 发布

阅读量1.4k

点赞数 5

分类专栏： Vue 文章标签： node.js 前端后端

本文链接：https://blog.csdn.net/m0_59897687/article/details/121500106

版权

3.computed和watch之间的区别

(1).区别

(2).两个重要的小原则

一、计算属性

1.定义

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

2.原理

底层借助了Object.defineproperty方法提供的getter和setter

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

(1).初次读取时会执行一次

(2).当依赖的数据发生改变时会被再次调用

4.优势

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

5.备注

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

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

6.案例（使用三种方法实现）

1.使用插值语法实现

<body>
    <div id="root">
        姓：<input type="text" v-model:value='firstname'><br/><br/>
        名：<input type="text" v-model:value='lastname'><br/><br/>
        全名：<span>{
  {firstname}}-{
  {lastname}}</span>
    </div>
</body>
<script>
    Vue.config.productionTip = false//阻止vue在启动时生成生产提示
    new Vue({
        el:'#root',
        data:{
            firstname:'张',
            lastname:'三'
        }
    })
</script>

2.使用methods实现

<body>
    <div id="root">
        姓：<input type="text" v-model:value='firstname'><br/><br/>
        名：<input type="text" v-model:value='lastname'><br/><br/>
        全名：<span>{
  {fullName()}}</span>
    </div>
</body>
<script>
    Vue.config.productionTip = false//阻止vue在启动时生成生产提示
    new Vue({
        el:'#root',
        data:{
            firstname:'张',
            lastname:'三'
        },
        methods:{
            fullName(){
                return this.firstname+'-'+this.lastname
            }
        }
    })
</script>

3.使用计算属性实现

<body>
    <div id="root">
        姓：<input type="text" v-model:value='firstnam

最低0.47元/天解锁文章

吃不到棒棒糖的小熊

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue (3) — 计算属性、监视属性(侦听属性)、深度监视

目录一、计算属性 1.定义 2.原理 3.get函数什么时候执行？ 4.优势 5.备注 6.案例（使用三种方法实现） 1.使用插值语法实现 2.使用methods实现 3.使用计算属性实现 7.计算属性的简写二、监视属性(即“侦听属性”)三、深度监视 1.深度监视 2.深度监视的简写 (1).写法一 (1).写法二 3.computed和watch之间的区别...
复制链接

扫一扫