Vue—计算属性与监视器

最新推荐文章于 2024-03-01 20:52:38 发布

肖白衣

最新推荐文章于 2024-03-01 20:52:38 发布

阅读量121

点赞数

分类专栏： Vue2 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_59709533/article/details/128809670

版权

Vue2 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

计算属性与监视器

在{{ }}中虽然可以编写JS表达式，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护；
于是就有计算属性(computed),计算属性和data中的数据一样可以在模板之中直接使用，计算属性底层借助Object。defineproperty()方法提供的getter与setter，计算属性默认只使用getter方法，setter修改属性需要。
get初次读取时会执行一次，当依赖的数据发生变化时会再次调用。

计算属性(computed)与methos

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

计算属性与侦听器

watch侦听属性可以监听数据的变化，但是默认的是浅层次的监视。不能监听到对象内部属性值的变化。
在watch中配置deep:true可以监测对象内部值的改变（多层）
watch 多用于进行异步任务

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性与监视器</title>
    <!-- 引入Vue3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        请输入你的出生年份：
        <input type="number" v-model="age">
        <div v-if="age ? true:false ">你今年{{ages}}岁了!</div>
    </div>
    <script>
        const { createApp } = Vue

        createApp({
            data() {
                return {
                    age: '',

                }
            },
            computed: {
                ages() {
                    return 2023 - this.age
                }
            },
            watch: {
                //正常写法
                ages: {
                    immediate: true, //初始化时让handler调用一下
                    handler(newValue, oldValue) {
                        console.log("age改变了", newValue, oldValue)
                    }
                },
                // 简写
                ages(newValue, oldValue) {
                    console.log("age改变了", newValue, oldValue)
                }
            }

        }).mount('#app')

    </script>
</body>

</html>