Vue基础----计算属性和侦听器

最新推荐文章于 2024-06-06 09:55:15 发布

LHL_C

最新推荐文章于 2024-06-06 09:55:15 发布

阅读量129

点赞数

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

原文链接：https://blog.csdn.net/bjsyc123456/article/details/121700783?spm=1001.2014.3001.5501

版权

VUE 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

计算属性

为什么要使用计算属性？

模板上的表达式很便利，但有时候需要用到复杂的运算，写在模板表达式上面会让模板加重且难以维护。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 双向绑定firstName 和 lastName -->
        <label for="firstName">姓：</label>
        <input type="text" name="" id="firstName" v-model="firstName">
        <label for="lastName">名：</label>
        <input type="text" name="" id="lastName" v-model="lastName">

        <!-- 计算属性的函数名  在模板上以函数名赋值 -->
        <b>{{ fullName }}</b>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: '',
            lastName: '',
        },
        // 计算属性
        computed: {
            // 函数形式 实现一个计算属性
            fullName() {
                // 必须要有返回值   （返回了姓 + 名  如果姓名有改动 会执行这个函数）
                return this.firstName + ' ' + this.lastName
            }
        },
    })
</script>

</html>

在这里插入图片描述
如果data中有和计算属性同名的会报错！！！:

var vm = new Vue({
    el: '#app',
    data: {
        firstName: '',
        lastName: '',
        fullName: '111'
    },
    // 计算属性
    computed: {
        // 函数形式 实现一个计算属性
        fullName() {
            // 必须要有返回值   （返回了姓 + 名  如果姓名有改动 会执行这个函数）
            return this.firstName + ' ' + this.lastName
        }
    },
})

在这里插入图片描述
计算属性的get()和set()方法：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 双向绑定firstName 和 lastName -->
        <label for="firstName">姓：</label>
        <input type="text" name="" id="firstName" v-model="firstName">
        <label for="lastName">名：</label>
        <input type="text" name="" id="lastName" v-model="lastName">

        <!-- 计算属性的函数名  在模板上以函数名赋值 -->
        全名：<input type="text" v-model="fullName"></input>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: '',
            lastName: '',
        },
        // 计算属性
        computed: {

            // 对象形式 实现一个计算属性
            fullName: {
                get() {
                    // get方法返回值
                    // 必须要有返回值   （返回了姓 + 名  如果姓名有改动 会执行这个函数）
                    return this.firstName + ' ' + this.lastName
                },
                set(value) {
                    // set方法 接受一个参数  如果fullName更改会触发set方法 value为fullName新值
                    let name = value.split(' ');
                    this.firstName = name[0];
                    this.lastName = name[1];
                }
            }
        },
    })
</script>

</html>

在这里插入图片描述
注意：get方法必须要有返回值，set方法接受一个参数之后更改对象值会被触发

计算属性的特点：

computed 监控的数据在data中没有声明
computed 不支持异步，当conputed中有异步操作时，无法监听数据的变化
computed 具有缓存，页面重新渲染，值不变时，会直接返回之前的计算结果，不会重新计算
如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，一般使用computed
conputed 计算属性值是函数时，默认使用get方法。如果属性值是属性值时，属性有一个get和set方法，当数据发生变化的时候会调用set方法

侦听器：

为什么使用侦听器？

computed计算属性不能和data中的数据同名，如果要监听data中的数据或者props内的数据就要使用侦听器了

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <button @click="handlerName">按钮</button>
        <button @click="btnClick">按钮2</button>
        <button @click="selectClick">查看</button>
        <p>{{family.son}}</p>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: "张三san",
            family: {
                father: "张三",
                mother: "韩梅梅",
                son: "杰克"
            }
        },
        methods: {
            handlerName() {
                this.family.son = "汤姆"
            },
            btnClick() {
                this.family.son = '杰瑞'
            },
            selectClick() {
                console.log(this.family);

            }
        },
        watch: {
            family: {
           		// 对象方式侦听器  对象内必须要有handler方法 
           		// 参1为新值 参2为旧值
                handler(newVal, oldVal) {
                    console.log(newVal, oldVal);
                },
                // 控制侦听器 加载完页面自动触发一次
                immediate: true,
                // 如果 watch 侦听一个对象, 若对象中的属性值发生了变化,则无法被监听到
                // .此时需要使用deep 选项  深度监听
                deep: true
            }
        }
    })
</script>
</html>

在这里插入图片描述

计算属性和侦听器的区别:

应用场景不同
- watch比较适合用于当一个对象变化来改变父组件或者子组件内多个对象或者条件的变化
- computed更加适合用于多个变量的改变引起某个数据或对象的改变时
执行方式不同
- conputed是监听不到异步改变的
- watch是可以监听到异步改变的
写法不同
- conputed一般是不需要参数的依赖于多个项必须有返回值
- watch 是有参数的不需要返回值
有无缓存
- watch监听的是data中有的属性 conputed监听属性和data中的属性不能重名

LHL_C

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue基础----计算属性和侦听器

计算属性为什么要使用计算属性？模板上的表达式很便利，但有时候需要用到复杂的运算，写在模板表达式上面会让模板加重且难以维护。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
复制链接

扫一扫