VUE前进之路使用数据代理,计算属性与监视属性的妙用
Posted 大熊李子
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE前进之路使用数据代理,计算属性与监视属性的妙用相关的知识,希望对你有一定的参考价值。
1.数据代理
1.1什么是数据代理
通过一个对象代理对另一个对象中属性的操作(读/写)
1.Vue中的数据代理:通过vm对象来代理data对象中属性的操作(读/写)
2.Vue中数据代理的好处:更加方便的操作data中的数据
3.基本原理:通过0bject . defineProperty( )把data对象中所有属性添加到vm上。为每一一个 添加到vm上的属性,都指定个getter/setter。在getter/setter内部去操作(读/写) data中对应的属性。简单来说就是把data的属性全部都复制给了_data了一份,可以让vm进行使用
1.2了解使用数据代理
Object.defineProperty方法(给对象添加属性方法的一个方法)这个方法会传入三个参数分别是 对象名,属性名,配置项
在这里我们可以看到,这个颜色稍微的优点变化(这里就是使用Object.defineProperty方法进行添加的,这里的age是不可以进行枚举的,即不参与遍历)
<script>
let person =
name:'大熊'
sex:'男',
Object.defineProperty(person,'address',
value:18
)
console.log(person);
</script>
这里可以使用Object.keys()进行验证一下(并没有age这个属性)(可以看到依然没有age)
当然也可以使用for… in进行遍历一下这个对象
如和才能让他可以被枚举呢?(这里就使用 enumerable 只要将它的值改为true即可)enumerable: true (是否可以被枚举)writable:true(是否可以修改属性)configurable: true(是否可以删除改属性)这四个基本配置项的内容(包括value)他们的默认值为false
<script>
let person =
name:'大熊',
sex:'女',
Object.defineProperty(person,'address',
value:18
)
for(k in person)
console.log(k);
console.log(Object.keys(person));
console.log(person);
</script>
那问题来了,如何进行对数据的读取和修改呢?这里用到了两个方法,get和set
当有人读取person的age属性时,get函 数(getter)就会被调用,且返回值就是age值
当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具值
<script>
let number = 19;
let person =
name: '大熊',
sex: '女',
Object.defineProperty(person, 'address',
get()
console.log('age属性已被读取');
return number;
,
set(value)
console.log('age属性已被修改');
number = value
)
</script>
2. 事件处理
1.使用v-on:xxx或@xxx绑定事件,其中xxx是事件名
2.事件的回调需要配置在methods对象中,最终会在vm上
3.methods中配置的函数,不可以使用箭头函数,否则this就不是vm了而是window
4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或组件实例对象5.@click="demo"和@click="demo"效果一致,但后者可以传参
注:不要把事件回调方法data里,虽然可以实现相同的功能,但是这样会给增加一个数据代理,给一个方法添加数据代理是没有意义的
<div id="user">
<h1>name吃饭了吗?</h1>
<button v-on:click="showPage($event,18)">点击提示</button>
<!-- 第一个参数是event,所以下面的参数顺序要和这里一致 -->
</div>
<script>
let vm = new Vue(
el: '#user',
data:
name: '山鱼',
,
methods:
// 在这里配置各种事件回调
showPage(event, number)
alert('山鱼吃饭了!')
console.log(number);
)
</script>
2.1事件修饰符
1.prevent:阻止默认事件(常用)
2.stop: 阻止事件冒泡(常用)
3.once:事件只触发一次(常用)
4.capture: 使用事件的捕获模式
5.self: 只有event.target是当前操作的元素是才触发事件;
6.passive: 事件的默认行为立即执行,无需等待事件回调执行完毕;
<div id="user">
<h1>欢迎来到name的小屋</h1>
<!-- 1,阻止默认事件 -->
<a href="http://baidu.com" @click.prevent = "showInfo">点我不跳转</a>
<!-- 2,阻止事件冒泡 -->
<div class="one" @click = 'showInfo'>
<button @click.stop = 'showInfo'>点我</button>
</div>
<!-- 3,事件只触发一次 -->
<button @click.once = 'showInfo'>只能点一次</button>
</div>
<script>
const vm = new Vue(
el:'#user',
data:
name:'大熊',
,
methods:
showInfo(e)
alert('同学,慢走!')
)
</script>
2.2键盘事件
常用的按键别名
回车=> enter,删除=>delete(捕获“删除”和“退格”键),退出=> esc,空格=> space,上=>up,下=> down,左=> left,右=> right
特殊的按键别名
1.换行=> tab (特殊,必须配合keydown使用)
2.系统修饰键 ctrl,alt,shift,meta(meta就是win键也就是windows徽标)
注:
(1).配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。
(2).配合keydown使用:正常触发事件。
<div class="user">
<h1>欢迎加入uname</h1>
<!--.enter 就是按下回车触发事件,也成为按键别名-->
<input type="text" placeholder="按下回车提示输入" @keyup.enter = 'showInfo'>
<!--删除 del -->
<input type="text" placeholder="按下del提示输入" @keyup.delete = 'showInfo'>
<!-- 退出esc -->
<input type="text" placeholder="按下ESC提示输入" @keyup.esc = 'showInfo'>
<!-- 特殊按键别名 -->
<input type="text" placeholder="一同按下ctrl+‘其他按键’并释放提示输入" @keyup.ctrl = 'showInfo'>
<!-- 自定义别名 -->
<input type="text" placeholder="按下回车提示输入" @keyup.huiche = 'showInfo'>
</div>
<script>
// 也可以自定义按键别名
Vue.config.keyCodes.huiche = 13;
const vm = new Vue(
el:'.user',
data:
uname:'山鱼社区'
,
methods:
showInfo(e)
console.log(e.target.value);
)
</script>
3.计算属性
1.定义: 要用的属性不存在,要通过已有属性计算得来。
2.原理:底层借助了objcet . defineproperty方法提供的getter和Isetter.
3. get函数什么时候执行?
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势:与jmethods 实现相比,内部有缓存机制(复用),效率更高,调试方便。
5.注:
1.计算属性最终会出现在:vm上,直接读取使用即可。
2.如果i计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发发生变化
3.计算属性内不能够开启异步任务(如:定时器)
<body>
<!-- 容器 -->
<div class="user">
姓:<input type="text" v-model="firstName"><br>
名:<input type="text" v-model="lastName"><br>
姓名:<span>fullName</span>
</div>
<script>
const vm = new Vue(
el: '.user',
data:
firstName: '李',
lastName: '四'
,
// 计算属性
computed:
fullName:
// 当ful1Name被读取时,get就会被调用,且返回值就作为fullName的值,而且get有个缓存效果
// 这里的get在初次读取fullName时会被调用,在所依赖的数据进行改变时也会调用
// 这里所依赖的数据有俩分别是firstName和lastName
get()
return this.firstName +"-" +this.lastName
,
// 当fullName被修改时调用
set(value)
console.log('set被hi行');
const arr = value. split('-');
this.firstName = arr[0];
this.lastName = arr[1];
)
</script>
</body>
简写计算属性(前提是只用到get的时候可以简写)
4.侦听属性
监视属性watch:
1.当被监视的属性变化时,回调函数自动调用,进行相关操作
2.监视的属性必须存在,I才能进行监视! !
3.监视的两种写法:
(1) . new Vue时传入watch配置
(2) .通过vm. $watch监视
<body>
<div class="user">
<h1>今天我很info</h1>
<button @click='changeMood'>点击切换心情</button>
</div>
<script>
new Vue(
el: '.user',
data:
mood: true
,
computed:
info()
return this.mood ? '开心' : '不开心'
,
,
methods:
changeMood()
this.mood = !this.mood
,
watch:
// 被监视的是谁
mood:
immediate: true,// 初始化时 让handler调用一次
// handler有俩参数分别是修改前的值和修改后的值
handler(newValue, oldValue)
console.log('mood被修改了', newValue, oldValue);
,
// 这个监视属性也可以监视计算属性
info:
immediate: true,// 初识化时 让handler调用一次
// handler有俩参数分别是修改前的值和修改后的值
handler(newValue, oldValue)
console.log('info被修改了', newValue, oldValue);
,
)
// 也可以用vm.$watch进行监视 =》vm.$watch(监视对象,如何监视)
vm.$watch('mood',
immediate: true,// 初识化时 让handler调用一次
// handler有俩参数分别是修改前的值和修改后的值
handler(newValue, oldValue)
console.log('info被修改了', newValue, oldValue);
)
</script>
</body>
4.1深度监视
深度监视
①Vue中的watch默认不监测对象内部值的改变
②配置deep:true可以监测对象内部值改变
备注:
①Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以
②使用watch时根据数据的具体结构,决定是否采用深度监视
4.2监视属性简写
简写(但是不能配置immediate:true,deep:true)
watch:
// 完整写法
// mood:
// deep:true
// handler(newValue, oldValue)
// console.log("mood被修改", newValue, oldValue);
//
//
// 简写
mood(newValue, oldValue)
console.log('mood被修改', newValue, oldValue);
)
// 正常写法
vm.$watch('mood',
immediate:true,
deep:true,
handler(newValue, oldValue)
console.log('mood被修改', newValue, oldValue);
)
// 简写
vm.$watch('mood',function(newValue, oldValue)
console.log('mood被修改', newValue, oldValue);
)
4.3computed & watch之间的区别
1.computed能完成的功能,watch 都可以完成。
2.watch能完成的功能,computed不一定能完成,例如: watch可以进行异步操作。
3.两个重要的小原则:
①所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象。
②所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等),最好写成箭头函数,这样this的指向才是vm或组件实例对象。
5.写在最后
大家好我是大熊🐻
一个学前端的旅行者也是一个前进的创作者,奋进再这篇土地,希望能和您相遇
✍善于利用零星时间的人,才会做出更大的成绩来。——华罗庚
vue3中计算属性与监视
computed 函数:
- 与 computed 配置功能一致
- 只有 getter
- 有 getter 和 setter
watch 函数
- 与 watch 配置功能一致
- 监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调 默认初始时不执行回调, 但可以通过配置 immediate 为 true, 来指定初始时立即执行第一次
- 通过配置 deep 为 true, 来指定深度监视
watchEffect 函数
- 不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
- 默认初始时就会执行第一次, 从而可以收集需要监视的数据
- 监视数据发生变化时回调
fistName:
<input v-model="user.firstName" />
<br />
lastName:
<input v-model="user.lastName" />
<br />
fullName1:
<input v-model="fullName1" />
<br />
fullName2:
<input v-model="fullName2" />
<br />
fullName3:
<input v-model="fullName3" />
<br />
import {
defineComponent,
computed,
watch,
watchEffect,
reactive,
ref,
} from "vue";
setu(){
const user = reactive({
firstName: "A",
lastName: "B",
});
// 使用计算属性
const fullName1 = computed(() => {
return user.firstName + "-" + user.lastName;
});
const fullName2 = computed({
set(value) {
console.log("fullName2 set");
const names = value.split("-");
user.firstName = names[0];
user.lastName = names[1];
},
get() {
console.log("fullName2 get");
return user.firstName + "-" + user.lastName;
},
});
// 监听
const fullName3 = ref("");
// 通过改变user,来监听其他数据
watch(
user,
() => {
fullName3.value = user.firstName + user.lastName;
},
{
immediate: true, // 是否初始化立即执行一次, 默认是false
deep: true, // 是否是深度监视, 默认是false
}
);
/*
watchEffect: 监视所有回调中使用的数据
*/
/*
watchEffect(() => {
console.log('watchEffect')
fullName3.value = user.firstName + '-' + user.lastName
})
*/
// 通过监听fullName3 改变 其他的数据
// watch(fullName3, (value) => {
// console.log(value);
// const names = value.split("-");
// user.firstName = names[0];
// user.lastName = names[1];
// });
/*
watch多个数据:
使用数组来指定
如果是ref对象, 直接指定
如果是reactive对象中的属性, 必须通过函数来指定
*/
watch([() => user.firstName, () => user.lastName, fullName3], (values) => {
console.log("监视多个数据", values);
});
return { btn, user, fullName1, fullName2, fullName3 };
}
以上是关于VUE前进之路使用数据代理,计算属性与监视属性的妙用的主要内容,如果未能解决你的问题,请参考以下文章