Vue核心基础3:计算属性和监视属性

这篇具有很好参考价值的文章主要介绍了Vue核心基础3:计算属性和监视属性。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1 计算属性

这边以姓名案例,来介绍计算属性

<body>
    <div id="root">
        <!-- 姓:<input type="text" v-model:value="firstName"><br>
        名:<input type="text" v-model:value="lastName"><br> -->
        姓:<input type="text" v-model="firstName"><br>
        名:<input type="text" v-model="lastName"><br>
        全名:<span>{{fullName}}</span><br>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                firstName: '张',
                lastName: '三'
            },
            // 计算属性
            computed: {
                // 1.完整写法
                fullName: {
                    // get有什么作用?当有人读取fullName时,get就会被调用,且返回值就作为fullName的值
                    get() {
                        // get函数中的this Vue已经处理好了, 指向vm
                        // get什么时候被调用?1.初次读取fullName时。2.所依赖的数据发生变化时
                        // 会有缓存,只调用一次,如果依赖的数据没有变化,那么不会重新调用get方法,直接走缓存
                        return this.firstName.slice(0, 3) + '-' + this.lastName
                    },
                    // set什么时候被调用?当fullName被修改时。
                    set(value) {
                        const arr = value.split('-')
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }

                // 2. 简写写法:确定了计算属性只读不改才能用简写形式
                // 可以直接将fullName函数当做一个属性来用
                // fullName() {
                //     return this.firstName.slice(0, 3) + '-' + this.lastName
                // }
            }

        })
    </script>
</body>

计算属性主要依靠它的返回值

Vue核心基础3:计算属性和监视属性,Vue,vue.js,前端,javascript 

2 监视属性

这边以天气案例,来介绍监视属性

<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="change">切换天气</button>

    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                isHot: true
            },
            methods: {
                change() {
                    this.isHot = !this.isHot
                }
            },
            computed: {
                info() {
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            watch: {
                isHot: {
                    immediate: false, // 初始化时如果为true,就是让handler调用一下
                    // handler什么时候调用呢?  -> 当isHot发生改变的时候
                    handler(newValue, oldValue) {
                        console.log('isHot被修改了')
                        console.log(newValue, oldValue)
                    }
                }
            }

        })

        // 这样写也可以
        // vm.$watch('isHot', {
        //     immediate: true,
        //     handler(newValue, oldValue) {
        //         console.log('isHot被修改了')
        //         console.log(newValue, oldValue)
        //     }
        // })
    </script>
</body>

2.1 深度监视

            watch: {
                isHot: {
                    // immediate: false, // 初始化时如果为true,就是让handler调用一下
                    // handler什么时候调用呢?  -> 当isHot发生改变的时候
                    handler(newValue, oldValue) {
                        console.log('isHot被修改了')
                        console.log(newValue, oldValue)
                    }
                },

                // 1. 监视多级结构中某个属性的变化
                 'numbers.a': function (newValue, oldValue) {
                     console.log('a被修改了')
                    console.log(newValue, oldValue)
                  },

                // 2. 监视多级结构中所有属性的变化
                numbers: {
                    deep: true,
                    handler() {
                        console.log('numbers被修改了')
                    }
                }
            }

2.2 简写形式

            watch: {
                // 1.   完整写法
                isHot: {
                    immediate: false, // 初始化时如果为true,就是让handler调用一下
                    deep: true,  // 深度监视

                    // handler什么时候调用呢?  -> 当isHot发生改变的时候
                    handler(newValue, oldValue) {
                        console.log('isHot被修改了')
                        console.log(newValue, oldValue)
                    }
                },


                // 2. 简写
                isHot(newValue, oldValue) {
                    console.log('isHot被修改了')
                    console.log(newValue, oldValue)
                }

            }

2.3 使用监视属性实现姓名案例

<body>
    <div id="root">
        <!-- 姓:<input type="text" v-model:value="firstName"><br>
        名:<input type="text" v-model:value="lastName"><br> -->
        姓:<input type="text" v-model="firstName"><br>
        名:<input type="text" v-model="lastName"><br>
        全名:<span>{{fullName}}</span><br>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                firstName: '张',
                lastName: '三',
                fullName: '张-三'
            },
            watch: {
                firstName(newValue) {
                    console.log(this)
                    this.fullName = newValue + '-' + this.lastName
                },
                lastName(newValue) {
                    this.fullName = this.firstName + '-' + newValue
                }
            }

        })
    </script>
</body>

Vue核心基础3:计算属性和监视属性,Vue,vue.js,前端,javascript

Vue核心基础3:计算属性和监视属性,Vue,vue.js,前端,javascript 

3 computed 和 watch 的比较

Vue核心基础3:计算属性和监视属性,Vue,vue.js,前端,javascript文章来源地址https://www.toymoban.com/news/detail-829584.html

到了这里,关于Vue核心基础3:计算属性和监视属性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3前端开发,computed计算属性的基础练习

    Vue3前端开发,computed计算属性的基础练习! 在新版里面,和传统的vue2一样,计算属性,都是对一些数据运算进行了封装操作。返回结果是一个实时监控的效果。区别在于,写法不同。效果是一样。 下面给大家展示一个简单的案例。 如图,自定义一个组件,ComputedDemo.vue。里

    2024年01月18日
    浏览(48)
  • Vue-12、Vue监视属性

    1、介绍 Vue中的监视属性是通过watch选项来实现的。watch选项可以是一个对象,其中的每个属性都是要监视的属性名,而每个属性的值都是一个回调函数,用于处理这个属性的变化。 例如,假设有一个Vue实例的data对象中有一个属性message,我们想要监视这个属性的变化,可以通

    2024年01月25日
    浏览(41)
  • 〖大前端 - 基础入门三大核心之JS篇㉓〗- JavaScript 的「数组」

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2024年02月04日
    浏览(67)
  • 〖大前端 - 基础入门三大核心之JS篇㉟〗- JavaScript 的DOM简介

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超

    2024年02月04日
    浏览(53)
  • 〖大前端 - 基础入门三大核心之JS篇㉔〗- JavaScript 的数组的常用方法 (一)

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2024年02月07日
    浏览(55)
  • 〖大前端 - 基础入门三大核心之JS篇㊲〗- DOM改变元素节点的css样式、HTML属性

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超

    2024年02月04日
    浏览(59)
  • 〖大前端 - 基础入门三大核心之JS篇⑰〗- JavaScript的流程控制语句「while循环语句」

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2024年02月04日
    浏览(92)
  • 〖大前端 - 基础入门三大核心之JS篇⑱〗- JavaScript的流程控制语句「break 和 continue语句」

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2024年02月05日
    浏览(55)
  • 〖大前端 - 基础入门三大核心之JS篇⑯〗- JavaScript的流程控制语句「for循环语句及算法题」

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2024年02月07日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包