Vue 计算属性 && 监视属性
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Vue 计算属性</title>
6 <script type="text/javascript" src="../js/vue.js"></script>
7 </head>
8 <body>
9 <!--
10 Vue中的计算属性：
11 1.定义：要用的属性不存在，要通过已有属性计算得来。
12 2.原理：底层借助Object.defineproperty方法提供getter和setter。
13 3.get函数什么时候执行
14 .初次读取时会执行一次。
15 .当依赖的数据发生改变的时候会再次调用
16 4.优势：与通过methods实现计算属性相比，内部有缓存机制（复用），效率更高，调试方便。
17 5.备注：
18 .计算属性最终会出现在vm上，直接读取使用即可
19 .如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
20
21 -->
22 <div id="root">
23 姓：<input type="text" v-model="firstName" > <br />
24 名：<input type="text" v-model="lastName" > <br />
25 全名：<span>{{fullName}}</span>
26 </div>
27 </body>
28
29 <script type="text/javascript" >
30 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
31 let vm = new Vue({
32 el: '#root',
33 data:{
34 firstName: '张',
35 lastName: '三'
36 },
37 computed:{
38 fullName: {
39 get(){ // get什么时候调用：1.初次读取fullName的时候，2.所依赖的数据发生变化的时候调用。3.其它都是直接从缓存中获取fullName的值
40 return this.firstName + '-' + this.lastName
41 },
42 set(value){ // 当this.fullName='李-四'值修改的时候调用
43 let arr = value.split('-');
44 this.firstName = arr[0];
45 this.lastName = arr[1];
46 }
47 },
48 fullName1:function(){ // 计算属性简写（当计算属性只考虑读取才能简写，fullName1直接当做get）
49 return this.firstName + '-' + this.lastName
50 }
51 }
52 })
53 </script>
54 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Vue 监视属性</title>
6 <script type="text/javascript" src="../js/vue.js"></script>
7 </head>
8 <body>
9 <!--
10 监视属性watch：
11 1.当被监视的属性变化时，回调函数自动调用，进行相关操作
12 2.监视的属性必须存在，才能进行监视
13 3.监视的两种写法：
14 .new Vue时传入watch配置
15 .通过vm.$watch添加监视属性
16 4.深度监视：
17 .Vue中的watch默认不监视对象内部值的改变（一层）
18 .配置deep:true可以检测对象内部值的改变（多层）
19 备注：
20 .Vue自身可以检测对象内部值的改变，但Vue提供的watch默认不检测内部值的改变
21 .使用watch时根据数据的具体结构，决定是否采用深度监视
22 -->
23 <div id="root">
24 <h2>今天天气很{{info}}</h2>
25 <button @click="changeWeather">切换天气</button>
26 <br />
27 <h3>a的值是：{{numbers.a}}</h3>
28 <button @click="numbers.a++">点我让a+1</button><br />
29 <h3>b的值是：{{numbers.b}}</h3>
30 <button @click="numbers.b++">点我让b+1</button><br />
31 </div>
32 </body>
33
34 <script type="text/javascript" >
35 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
36 let vm = new Vue({
37 el: '#root',
38 data:{
39 isHot: false,
40 numbers: {
41 a:1,
42 b:1
43 }
44 },
45 computed:{
46 info(){
47 return this.isHot ? '炎热' : '凉爽';
48 }
49 },
50 methods:{
51 changeWeather(e){
52 this.isHot = ! this.isHot;
53 }
54 },
55 watch:{
56 // isHot:{ // 不仅可以监视data中的数据，还可以监控computed中的数据
57 // immediate: true, // 初始化时自动调用一下handler
58 // handler(newValue, oldValue){ // 当isHot发生改变时调用
59 // console.log(newValue, oldValue);
60 // console.log('isHot被修改了！');
61 // }
62 // },
63 // isHot(newValue, oldValue){ // 简写模式，缺点是没办法设置immediate、deep属性
64 // console.log(newValue, oldValue);
65 // },
66 'numbers.a':{ // 监测多层次结构中某个属性的变化
67 handler(newValue, oldValue){
68 console.log('numbers.a被修改了！');
69 }
70 },
71 numbers:{
72 deep: true, // 监测多层次结构的所有变化，该值默认为false不监视
73 handler(newValue, oldValue){
74 console.log('numbers被修改了！');
75 }
76 }
77 }
78 });
79 // 另一种添加监视属性的方式
80 // 好处：可以根据用户的行为从而决定监视哪个属性
81 vm.$watch('isHot',{
82 immediate: true, // 初始化时自动调用一下handler
83 handler(newValue, oldValue){ // 当isHot发生改变时调用
84 console.log(newValue, oldValue);
85 console.log('isHot被修改了！');
86 }
87 })
88 // 简写模式，缺点是没办法设置immediate、deep属性
89 // vm.$watch('isHot',function(newValue, oldValue){ // 当isHot发生改变时调用
90 // console.log(newValue, oldValue);
91 // console.log('isHot被修改了！');
92 // })
93 </script>
94 </html>
Vue 计算属性 && 监视属性的更多相关文章
- vue的计算和监视属性,附一小实例
1. 计算属性 在computed属性对象中定义计算属性的方法 在页面中使用{{方法名}}来显示计算的结果 2. 监视属性: 通过通过vm对象的$watch()或watch配置来监视指定的属性 当属性 ...
- Vue学习之--------监视属性（2022/7/10）
文章目录 1.监视属性 1.1 监视属性--天气案例 1.1.1 基础知识 1.1.2 代码实例 1.1.2 测试效果 1.2 深度监视-天气案例 1.2.1 基础知识 1.2.2 代码实例 1.2. ...
- (尚004)Vue计算属性之基本使用和监视
所做效果预览: test004.html <!DOCTYPE html><html lang="en"><head> <meta char ...
- Vue的计算属性，监视属性代码理解
1.计算属性:在computed属性对象中定义计算属性的方法,在页面中使用{{方法名}}来显示计算的结果 //计算属性 computed:{ // 计算属性值的一个方法,方法的返回值是属性值,初始化显 ...
- Vue.js之Vue计算属性、侦听器、样式绑定
前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...
- (尚006)Vue计算属性之set与get
test004.html <!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...
- Vue计算属性
github地址:https://github.com/lily1010/vue_learn/tree/master/lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要 ...
- 在做vue计算属性，v-for处理数组时遇到的一个bug
bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...
- vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...
随机推荐
- mybatis plus 增删改自动填充字段值
说明 本文实现以下需求效果 创建数据时自动填充 createUserId 和 createTime 更新数据时自动填充 updateUserId 和 updateTime(每次修改都自动填充新的 up ...
- Nginx报错收集
在安装完成ngixn之后,访问页面显示空白,报错信息里面有这一条报错信息: tailf /usr/local/nginx/logs/error.log 2018/10/26 10:58:00 [err ...
- 『忘了再学』Shell基础 — 14、环境变量（二）
目录 1.PS1变量的作用 2.PS1变量的查看 2.PS1可以支持的选项 3.PS1环境变量的配置 4.总结 提示: 在Linux系统中,环境变量分为两种.一种是用户自定义的环境变量,另一种是系统自 ...
- 好客租房23-react组件的两种创建方式（抽离为独立js）
2.3抽离为单独组件 组件作为一个单独的个体,一般把每个组件放在单独的js中文件中 1创建hello.js 2在hello.js中导入React 3创建组件(函数或者类) hello.js子组件 // ...
- 好客租房25-react中的事件处理（事件对象）
3.2事件对象 可以通过事件处理程序的参数 React中的事件对象叫做:合成事件(对象) 合成事件:兼容所有浏览器 //导入react import React from 'react' ...
- 安装PostgreSQL到CentOS（YUM）
运行环境 系统版本:CentOS Linux release 7.6.1810 (Core) 软件版本:postgresql-12 硬件要求:无 安装过程 1.安装YUM-PostgreSQL存储库 ...
- break、continue、return中选择一个，我们结束掉它
在平时的开发过程中,经常会用到循环,在写循环的过程中会有很多判断条件及逻辑,你知道如何结束一个循环吗?在java中有break.continue.reture三个关键字都可以结束循环,我们看下他们 ...
- C++：小包包的玩具
小包包的玩具 时间限制 : 1.000 sec 内存限制 : 128 MB 题目描述: 小包包最讨厌的是整理他自己的玩具,为此,他制造了一个伟大的发明:玩具传送门!利用这个传送门,他可以 ...
- Django对接支付宝Alipay支付接口
最新博客更新见我的个人主页: https://xzajyjs.cn 我们在使用Django构建网站时常需要对接第三方支付平台的支付接口,这里就以支付宝为例(其他平台大同小异),使用支付宝开放平台的沙箱 ...
- ExtJS 布局-Accordion布局（Accordion layout）
更新记录: 2022年6月2日 开始. 2022年6月3日 发布. 1.说明 accordion(手风琴)布局一次仅显示一个子组件,内置支持 折叠 和 展开.当需要堆叠多个子组件,并每次只显示一次时, ...