vue2基础知识点（2）计算属性computed、监视属性watch

已于 2022-05-25 11:14:39 修改
阅读量124 收藏
点赞数 1
分类专栏： vue2 # vue2基础知识点 文章标签： vue.js javascript 前端
于 2022-05-24 22:09:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44242181/article/details/124955222
版权

王元肉==>个人主页

大家一起加油，我喜欢分专栏将知识打碎成一份一份小知识点，一篇文章只说一个知识点，因此每篇文章篇幅较短，希望大家不要介意。如有需要可以查看专栏看看是否有该文章中涉及到的知识点进行讲解的文章，如果大家觉得有帮助，希望大家三连支持一下。

推荐阅读

文章结构

计算属性

通过一个姓名案例来讲解计算属性

使用插值语法来实现

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>姓名案例_插值语法实现</title>
    <!-- 引入Vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br/><br/> 名：
        <input type="text" v-model="lastName"> <br/><br/> 全名：
        <span>{{firstName}}-{{lastName}}</span>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
        el: '#root',
        data: {
            firstName: '张',
            lastName: '三'
        }
    })
</script>

</html>

在这里插入图片描述

使用插值语法将逻辑代码放在页面代码中，不好维护与不美观

使用methods来实现

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>姓名案例_methods实现</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br /><br /> 名：
        <input type="text" v-model="lastName"> <br /><br /> 全名：
        <span>{{fullName()}}</span>
    </div>
</body>
<!-- 引入Vue -->
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
        el: '#root',
        data: {
            firstName: '张',
            lastName: '三'
        },
        methods: {
            fullName() {
                console.log('@---fullName')
                return this.firstName + '-' + this.lastName
            }
        },
    })

    console.log(vm);
</script>

</html>

在这里插入图片描述

后面通过和计算属性进行比较，可以知道为什么不使用methods而是选择使用计算属性

使用计算属性computed来实现

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>姓名案例_计算属性实现</title>
    <!-- 引入Vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>

<body>
    <!-- 
			计算属性：
					1.定义：要用的属性不存在，要通过已有属性计算得来。
					2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
					3.get函数什么时候执行？
								(1).初次读取时会执行一次。
								(2).当依赖的数据发生改变时会被再次调用。
					4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
					5.备注：
							1.计算属性最终会出现在vm上，"直接读取"使用即可。
							2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
							3.一些简单的计算属性，且后续不需要修改时，可以直接使用模板语法，但是从代码规范来说不推荐，不要在结构中书写过多的js代码
		 -->
    <!-- 准备好一个容器-->
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br/><br/> 名：
        <input type="text" v-model="lastName"> <br/><br/> 测试：
        <input type="text" v-model="x"> <br/><br/> 全名：
        <span>{{fullName}}</span> <br/>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
        el: '#root',
        data: {
            firstName: '张',
            lastName: '三',
            x: '你好'
        },
        // 计算属性：拿data中的属性处理之后形成新的属性
        computed: {
            fullName: {
                //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                //get会有缓存，当再次读取时，所依赖的数据没有发生变化，则不会再调用get()
                //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
                get() {
                    console.log('get被调用了')
                        // console.log(this) //此处的this是vm
                    return this.firstName + '-' + this.lastName + '-' + this.x;
                },
                //set不是一定要的，当仅仅只是展示时，不会调用。set什么时候调用? 当fullName被修改时。vm.fullName = 'xxx' 一般会写在函数中，this指向为vm所以会this.fullName = 'xxx'
                set(value) {
                    console.log('set', value)
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
            // //简写的前提，没有set，只有get
            // fullName() {
            //     console.log('get被调用了')
            //     return this.firstName + '-' + this.lastName
            // }
        }
    })
    console.log(vm);
</script>

</html>

在这里插入图片描述

methods和computed的区别

methods

在这里插入图片描述
在这里插入图片描述

computed

在这里插入图片描述
在这里插入图片描述

总结

我们发现使用methods时，vm实例对象会添加一个fullname属性，属性值是一个函数，当我们每次访问fullname的值时，都需要调用函数来得到值。而使用computed,fullname属性值就是我们需要的值，当我们访问的时候直接读取就行了，相比于methods可以节省不必要的性能开销。

监视属性

案例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>天气案例</title>
    <!-- 引入Vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="isHot = !isHot">切换天气</button>
        <button @click="changeWeather">切换天气</button>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
        el: '#root',
        data: {
            isHot: true,
        },
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot
            }
        },
    })
</script>

</html>

在这里插入图片描述

监视属性watch的使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>天气案例_监视属性</title>
    <!-- 引入Vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>

<body>
    <!-- 
			监视属性watch：
			1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
			2.监视的属性必须存在，才能进行监视！！
			3.监视的两种写法：
			(1).new Vue时传入watch配置
			(2).通过vm.$watch监视
		-->
    <!-- 准备好一个容器-->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
        el: '#root',
        data: {
            isHot: true,
        },
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot
            }
        },
        // 监视属性可以监听data中的属性，也可以监视计算属性
        /* watch:{
        	isHot:{
        		immediate:true, //初始化时让handler调用一下
        		//handler什么时候调用？当isHot发生改变时。
        		handler(newValue,oldValue){
        			alert('isHot被修改了'+newValue+oldValue);
        		}
        	}
        } */
    })

    vm.$watch('isHot', {
        immediate: true, //初始化时让handler调用一下
        //handler什么时候调用？当isHot发生改变时。
        handler(newValue, oldValue) {
            alert('isHot被修改了' + newValue + oldValue);
        }
    })
</script>

</html>

在这里插入图片描述

监视属性深度监视

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>天气案例_深度监视</title>
    <!-- 引入Vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>

<body>
    <!-- 
			深度监视：
			(1).Vue中的watch默认不监测对象内部值的改变（一层）。
			(2).配置deep:true可以监测对象内部值改变（多层）。
			备注：
			(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
			(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
		-->
    <!-- 准备好一个容器-->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
        <hr/>
        <h3>a的值是:{{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a+1</button>
        <h3>b的值是:{{numbers.b}}</h3>
        <button @click="numbers.b++">点我让b+1</button>
        <button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button> {{numbers}}
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
        el: '#root',
        data: {
            isHot: true,
            numbers: {
                a: 1,
                b: 1,
                c: {
                    d: {
                        e: 100
                    }
                }
            }
        },
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot
            }
        },
        watch: {
            isHot: {
                // immediate:true, //初始化时让handler调用一下
                //handler什么时候调用？当isHot发生改变时。
                handler(newValue, oldValue) {
                    console.log('isHot被修改了', newValue, oldValue)
                }
            },
            //监视多级结构中某个属性的变化
            /* 'numbers.a':{
            	handler(){
            		console.log('a被改变了')
            	}
            } */
            //监视多级结构中所有属性的变化
            numbers: {
                deep: true,
                handler() {
                    console.log('numbers改变了')
                }
            }
        }
    })
</script>

</html>

在这里插入图片描述

监视属性的简写

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>天气案例_监视属性_简写</title>
    <!-- 引入Vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
        el: '#root',
        data: {
            isHot: true,
        },
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot
            }
        },
        watch: {
            //正常写法
            /* isHot:{
            	// immediate:true, //初始化时让handler调用一下
            	// deep:true,//深度监视
            	handler(newValue,oldValue){
            		console.log('isHot被修改了',newValue,oldValue)
            	}
            }, */
            //简写，只有handler的时候
            /* isHot(newValue,oldValue){
            	console.log('isHot被修改了',newValue,oldValue,this)
            } */
        }
    })

    //正常写法
    /* vm.$watch('isHot',{
    	immediate:true, //初始化时让handler调用一下
    	deep:true,//深度监视
    	handler(newValue,oldValue){
    		console.log('isHot被修改了',newValue,oldValue)
    	}
    }) */

    //简写
    /* vm.$watch('isHot',(newValue,oldValue)=>{
    	console.log('isHot被修改了',newValue,oldValue,this)
    }) */
</script>

</html>

在这里插入图片描述

计算属性和监视属性的区别

1、计算属性不能做异步操作，而watch可以。
2、计算属性一般是对data或者其它计算属性进行逻辑操作生成一个新的属性，而watch是用来监听现有的一个属性，不产生新的属性。

将之前计算属性的姓名案例改造成监视属性实现

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>姓名案例_watch实现</title>
    <!-- 引入Vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>

<body>
    <!-- 
				computed和watch之间的区别：
						1.computed能完成的功能，watch都可以完成。
						2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
				两个重要的小原则：
							1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
							2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
								这样this的指向才是vm 或 组件实例对象。
		-->
    <!-- 准备好一个容器-->
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br/><br/> 名：
        <input type="text" v-model="lastName"> <br/><br/> 全名：
        <span>{{fullName}}</span> <br/><br/>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
        el: '#root',
        data: {
            firstName: '张',
            lastName: '三',
            fullName: '张-三'
        },
        watch: {
            firstName(val) {
                // 延时器中使用箭头函数，这样this指向就是vm了
                setTimeout(() => {
                    console.log(this)
                    this.fullName = val + '-' + this.lastName
                }, 1000);
            },
            lastName(val) {
                this.fullName = this.firstName + '-' + val
            }
        }
    })
</script>

</html>

在这里插入图片描述

计算属性不能异步

在这里插入图片描述
在这里插入图片描述

异步不起效果

结束啦！

LiuJie_Boom
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue学习笔记---(2)计算属性computed和监视属性watch(完整写法和简写形式)
Tomcat20的博客
10-17 1037
计算属性 computed 监视属性 watch
Vue基础语法之计算属性与监视属性(computed,watch)
weixin_45608136的博客
08-12 273
1.计算属性 计算属性: 1.定义:要用的属性不存在，要通过已有属性计算得来。 2.原理:底层借助了0bjcet.defineproperty方法提供的getter和setter. 3. get函数什么时候执行? (1).初次读取时会执行一次。 (2).当依赖的数据生改变时会被再次调用。 4.优势:与methods实现相比， 内部有缓存机制(复用)，效率更高，调试方便。 5.备注: 1.计算属性最终会出现在vm上，直接读取使用即可。 2.如果计算属性要被修改，那必
vue2知识点：计算属性与监听属性
刘大猫
05-20 986
文章目录一、计算属性computed举例：计算“全名”标签，由“姓-名”构成方式1方式2方式3二、(简写)计算属性三、计算属性-天气案例案例说明：今天天气很【炎热/凉爽】，点击按钮进行切换四、监听属性watch五、监听属性watch-深度监听举例：data配置numbers对象，其中有属性a和b，我想监听numbers，只要numbers中任意属性值改变了，我就打印一条语句。六、监听属性watch-(简写)深度监听七、计算属性和监视属性区别举例说明：天气案例使用：计算属性使用：监视属性 一、计算属性com.
Vue2基础知识自用（三）computed与watch
weixin_43756438的博客
07-22 713
箭头函数没有自己的this，所以当在箭头函数中调用this时才需要从内往外找其他的this来替代，也就是firstName的this（firstName是普通函数，它的this是vm）注意，之前说不要用箭头函数，是因为写在methods里 外面没有vm管理的普通函数包裹，this的指向就变成window了。如果创建实例时不知道监视谁，后续根据用户的行为添加监视。而大多数情况下set是不需要的，只计算用来展示，（2）第2种写法：通过vm.$watch监视。创建实例时就知道监视谁。
vue计算属性computed、事件、监听器watch的使用讲解
10-17
在Vue.js框架中，计算属性(computed)、方法(methods)、监听器(watch)是三种常用的功能，它们分别用于处理模板中的数据响应式问题。以下将详细介绍这三种功能的使用方法和区别。 ### 计算属性(computed) 计算属性是...
【Vue基础知识点速查手册 - 面试指南】从指令到计算属性,让Vue不再难懂
08-22
- 想快速回顾Vue知识点的开发者 使用场景及目标: - 可以作为Vue入门知识点速查手册 - 可以用来准备Vue开发者技术面试 其他说明: - 内容比较简洁,只涵盖基础语法点,不包含组件化开发等高级内容 - 可以配合其他更为...
Vue2 基础知识点
Fziha的博客
08-31 947
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。2、所有不被Vue所管理的函数（定时器的回调函数，ajax的回调函数等、promise的回调函数）最好写成箭头函数。且要给标签配置value值。4、methods中配置的函数，都是被Vue所挂你的函数，this的指向是vm 或 组件实例对象。
vue3基础知识点快速掌握
06-07
### Vue3基础知识点快速掌握 #### 一、Vue3简介 **发布时间与版本：** - **发布日期：** 2020年9月18日 - **版本号：** 3.0，代号"One Piece" - **最新版本：** 截至2023年10月，最新公开版本为3.3.4 **关键更新...
Vue3基础知识点速记图解
04-19
以下是一些Vue3的基础知识点，对于初学者来说尤其重要。 ### 1. Composition API Vue3 引入了Composition API，它允许开发者将组件的功能拆分为可复用的函数，提高了代码的可读性和可维护性。例如，`setup()`函数是...
Vue2 中对数组进行操作时需要注意什么
最新发布
m0_73882020的博客
09-06 276
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
开发适合el-dialog的拉伸拖拽自定义指令和适配自定义的图片查看组件
鹤渺的星球
09-05 1058
我之前有开发过一个图片查看的组件，这个组件可在单页面打开，也可以在弹窗里打开，但是弹窗因为是比较固定，所以有一些局限性，只能拖拽，不能改变弹窗大小，于是有了开发【可以拖拽改变大小的弹窗】组件。通过自定义指令，实现弹窗的移动拖拽拉伸等功能动态计算弹窗的位置与尺寸，因为弹窗的位置和尺寸是动态计算的，涉及到鼠标的实时位置和弹窗初始位置之间的关系。代码也贴上去了，仅供参考。
Chapter 11 脚手架Vue CLI使用步骤
2302_80253507的博客
09-06 235
Vue CLI 是 Vue.js 官方提供的一个全局命令工具，旨在帮助开发者快速创建和管理 Vue 项目。它为开发者提供了一个标准化的项目结构，并集成了 webpack 配置，使得开发过程更加高效和便利。
vue仓库的使用
weixin_58462329的博客
09-02 759
Vue仓库通常指的是使用Vue CLI创建的项目仓库，它包含了项目的所有源代码、配置文件以及依赖项。
手写 Vue Router 中的 Hash 模式和 History 模式
书呆子ITme
09-06 630
通过手写简化版的Vue Router，我们深入理解了Hash 模式和History 模式的实现原理。Hash 模式依赖于hashchange事件，而 History 模式依赖于pushState和API。两种模式各有优缺点，可以根据项目需求选择合适的路由模式。Hash 模式：简单、无需服务器配置，但URL不美观，对SEO不友好。URL美观且符合SEO要求，但需要服务器支持。
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项
weixin_41899098的博客
09-06 606
环境：vue3 + vuetify3 + unplugin-vue-router是怎么创建这个项目的：选择它推荐的设置（Recommend）
vue part6
E___V___E的博客
09-01 1003
第一步（仅第一次执行）：全局安装@vue/cli。第二步：切换到你要创建项目的目录，然后使用命令创建项目vue create xxxx（项目名字）第三步：启动项目 npm run serveebabel.config.js是es6=>es5的文件，package.json是配置文件，对于main.js分析我来回顾一下，$mount用来挂载实例，和el的功能基本一样，这个$mount是用来手动挂载的。
Vue响应式进阶常用API学习
weixin_44072254的博客
09-06 579
reactive()的浅层浅层响应式，和reactive()不同，这里没有深层级的转换：一个浅层响应式对象里只有根级别的属性是响应式的。readonly()的浅层作用形式,只有根级别是只读不可更改的，根级别以下的可更改，只是视图不会更新，但值改变了。shallowRef是浅层引用,只会跟踪原始对象的引用,不会跟踪原始对象的属性。创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。的副作用，这通常在对浅引用的内部值进行深度变更后使用。代理对象，并返回该代理对象对应的原始对象。
Vue(6)——生命周期
m0_74386799的博客
09-02 266
Vue生命周期：一个Vue实例从创建到销毁的整个过程。生命周期的四个阶段：创建、挂载、更新、销毁。
Vue 2.x基础API详解：模板语法、实例、计算属性等
Vue2.x教程之基础API是学习Vue.js框架的重要部分，它涵盖了 Vue 实例化、模板语法、计算属性、监听器、样式绑定、条件渲染、列表渲染、事件处理以及表单输入绑定等多个关键概念。以下是对这些知识点的详细阐述： 1....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LiuJie_Boom

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值