vue计算属性与侦听器的区别

Fairy_tutu

已于 2023-03-05 16:56:41 修改

阅读量1.1k

点赞数 3

文章标签： vue.js 前端 javascript

于 2022-12-20 15:52:25 首次发布

本文链接：https://blog.csdn.net/Fairy_tutu/article/details/128385764

版权

一 . 计算属性

(1) 作用 : 解决模板语法代码冗余问题

(2) 语法 : computed : {
计算属性名(){
return 计算属性值
}
}

(3) 注意点 : a. 计算属性要写在vue实例computed中
b. 计算属性函数一定要有返回值

(4) 计算属性的缓存机制 :
a. 当第一次使用计算属性的时候, vue会调用一次函数。然后把函数名和返回值平铺到vue实例中。
b. 之后使用计算属性, vue不会调用这个函数，而是从缓存中直接读取。
c. 只有当计算属性内部的数据发生变化的时候，才会重新执行一次这个函数，然后又放入缓存

(5) 代码演示 :

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
</head>

<body>
    <!-- HTML结构 -->
    <div id="app">
        <p>{{ msg }}</p>
        <p>{{ revMsg }}</p>
        <p>{{ revMsg }}</p>
        <p>{{ revMsg }}</p>
    </div>
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            // 1. el:挂载点
            el: '#app',
            // 2.data: 要渲染的数据
            data: {
                msg: '我爱敲代码',
            },
            // 3.methods:事件方法
            // 4.computed:计算属性
            computed:{
                revMsg(){
                    console.log(1)
                    return this.msg.split('').reverse().join('')
                }
            }
        })
    </script>
</body>
</html>

二 . 侦听器

(1) 作用 : 监听某一个数据变化

(2) 语法 : watch : {
要侦听的属性名 (newVal,oldVal) {
}
}

(3) 代码演示 :

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>

</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        用户名: <input type="text" placeholder="请输入用户名" v-model="username"><span>{{ info }}</span>
        <br>
        密码: <input type="text" placeholder="请输入密码" v-model="password">
    </div>

    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                username: '',
                password: '',
                info:''
            },
            //计算属性
            watch: {
                username(newVal, oldVal) {
                    console.log(newVal, oldVal)
                    this.info = '验证中...'
                    //模拟网络请求
                    setTimeout(()=>{
                        this.info = '该用户已被注册'
                    },500)
                }
            }
        })

    </script>
</body>

</html>

(4) 深度侦听 :

a. 作用 : 侦听引用类型内部数据变化

b. 语法 :

watch: {

"要侦听的属性名": {

deep: true, // 深度侦听复杂类型内变化

handler (newVal, oldVal) {}

}

c. 代码演示 :

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>

</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        用户名: <input type="text" placeholder="请输入用户名" v-model="user.username"><span>{{ info }}</span>
        <br>
        密码: <input type="text" placeholder="请输入密码" v-model="user.password">
    </div>

    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                user: {
                    username: '',
                    password: ''
                },
                info: ''
            },
            //计算属性
            watch: {
                user: {
                    deep: true,
                    handler(newVal, oldVal) {
                        console.log(newVal, oldVal)
                        this.info = '验证中...'
                        //模拟网络请求
                        setTimeout(() => {
                            this.info = '该用户已被注册'
                        }, 500)
                    }
                }
            }
        })


    </script>
</body>

</html>

三 . 计算属性与侦听器的区别 :

(1) 功能不同 : 计算属性是解决模板语法冗余,而侦听器是监听data中某一个数据的变化

(2) 计算属性有缓存，侦听器没有缓存

(3) 计算属性不支持异步操作，侦听器支持异步操作

(4) 计算属性可以新增一个属性，而侦听器一般监听data中的属性，或者监听路由

Fairy_tutu

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
vue计算属性与侦听器的区别

a. 当第一次使用计算属性的时候, vue会调用一次函数。c. 只有当计算属性内部的数据发生变化的时候，才会重新执行一次这个函数，然后又放入缓存。(1) 功能不同 : 计算属性是解决模板语法冗余,而侦听器是监听data中某一个数据的变化。b. 之后使用计算属性, vue不会调用这个函数，而是从缓存中直接读取。b. 计算属性函数一定要有返回值。(4) 计算属性可以新增一个属性，而侦听器一定要是data中的属性。(3) 计算属性不支持异步操作，侦听器支持异步操作。(2) 计算属性有缓存，侦听器没有缓存。
复制链接

扫一扫