Methods方法与Computed计算属性
<!DOCTYPE html>
<htmI lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible” content=" IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
.liColor {
background-color: brown;
}
</style>
</head>
<body>
<div id="app">
<!-- 计算属性:使用的时候不需要加小括号 -->
<div>{{myComputedName}}</div>
<!--这次使用>{{myComputedName}}是从缓存中读取的-->
<div>{{myComputedName}}</div>
<!--methods 使用的时候需要加小括号-->
<div>{{myName()}}</div>
<!--监听文本值的改变-->
<input type="text"
v-model="inputval" /><!--因为v-model是双向绑定，只要inputval变量一发生改变，那么所依赖inputval的模块都会重新渲染一遍，所以就实现了模糊查询-->
<ul>
<template v-for="item in myComputedNewList" :key="item">
<li>{{item}}</li>
</template>
</ul>
<ul>
<template v-for="item in myNewList()" :key="item">
<li>{{item}}</li>
</template>
</ul>
<script>
var app = Vue.createApp({
data() {
return {
userObj: {
name: '张三',
age: 23,
email: 'abc123@qq.com'
},
inputval: '',
charArr: ["aaa", 'abc', 'abd', 'bca'],
}
},
//computed与methods的不同就是methods没有缓存，而computed会有缓存，如果计算的值不发生变化，第二次用到这个方法就直接从缓存中拿，就不需要再计算一次了。提高性能
//computed 应该值做计算而没有任何其他的副作用的事，这点非常重要，请务必牢记。举列来说就是不要在计算属性中做异步请求，或者更改DOM的事情。
//计算的结果--会缓存
computed: {
myComputedName() {
return "中华人民共和国：" + this.userObj.name //计算属性是可以缓存的，只有this.userObj.name 发生改变的时候，才会从新计算一次，返回，如果不发生改变则直接从缓存中拿到值返回
},
myComputedNewList() {
return this.charArr.filter(item => item.includes(this.inputval));
}
},
//计算的结果--不会缓存
methods: {
myName() {
return "中华人民共和国：" + this.userObj.name
},
myNewList() {
return this.charArr.filter(item => item.includes(this.inputval));
}
}
}).mount("#app")
</script>
</div>
</body>
</htmI>
watch：监听器
<!DOCTYPE html>
<htmI lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible” content=" IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
.liColor {
background-color: brown;
}
</style>
</head>
<body>
<div id="app">
<!--监听文本值的改变-->
<input type="text"
v-model="inputval" /><!--因为v-model是双向绑定，只要inputval变量一发生改变，那么所依赖inputval的模块都会重新渲染一遍，所以就实现了模糊查询-->
<ul>
<template v-for="item in charArr" :key="item"> <!--v-for还可以in 一个方法，当然这个方法的返回结果必须是一个可以遍历的-->
<li>{{item}}</li>
</template>
</ul>
<!-- 监听对象的属性发生变化 -->
<select v-model="timeObj.year">
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
</select>
<select v-model="timeObj.month">
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select v-model="timeObj.day">
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<script>
var app = Vue.createApp({
data() {
return {
userObj: {
name: '张三',
age: 23,
email: 'abc123@qq.com'
},
inputval: '',
charArr: ["aaa", 'abc', 'abd', 'bca'],
charBakArr: ["aaa", 'abc', 'abd', 'bca'],
timeObj: {
year: 2023,
month: 12,
day: 30
}
}
},
//watch：监听器
//可以做watch中做异步请求，操作DOM
watch: {
//监听字符串类型：
//监听inputval这个变量发生改变，注意：这个inputval()的方法名称必须要与你监听变量的名称一致,它可以写一个参数，也可以写两个参数：
//写一个参数的时候就是：value：新的值
//写两个参数的时候就是：value：新的值，oldvalue：旧的值
// 写法：一
inputval(value,oldvalue){
this.charArr=this.charBakArr.filter(item=>item.includes(this.inputval))
console.log(this.charArr);
},
// 写法：二
inputval:function(value,oldvalue){
this.charArr=this.charBakArr.filter(item=>item.includes(this.inputval))
console.log(this.charArr);
},
//写法：三
inputval: "GetSelectItems", //在这里直接指定一个方法名称。然后就会去调用方法
//监听对象
timeObj: {
handler(value, oldvalue) { //固定写法，名称就是叫做handler
console.log(value, oldvalue);
},
deep: true, //固定写法：表示深度监控timeObj这个对象，对象里面的任何一个属性发生改变我们都会监听到
immediate:true //可选参数：因为我们知道watch是参数改变的时候才能监听到，为了数据初次加载就被监听到，那么就可以设置此参数
},
// 监听对象的某个属性
'timeObj.year': function (value, oldvalue) { //timeObj.year这个属性发生改变
console.log(value, oldvalue);
GetOrderData();
},
'timeObj.month': function (value, oldvalue) { //timeObj.month这个属性发生改变
console.log(value, oldvalue);
GetOrderData();
},
'timeObj.day': function (value, oldvalue) { //timeObj.day这个属性发生改变
console.log(value, oldvalue);
GetOrderData();
}
},
//computed与methods的不同就是methods没有缓存，而computed会有缓存，如果计算的值不发生变化，第二次用到这个方法就直接从缓存中拿，就不需要再计算一次了。提高性能
//computed 应该值做计算而没有任何其他的副作用的事，这点非常重要，请务必牢记。举列来说就是不要在计算属性中做异步请求，或者更改DOM的事情。
computed: {},
methods: {
ChangeColor(index) {
this.currentClickIndex = index; //将当前点击的li的索引赋值给currentClickIndex
},
GetSelectItems() {
//includes() 方法用于判断字符串是否包含指定的子字符串
//filter方法是过滤方法， item表示当前遍历charArr数组的项，如果当前项包含了input中输入的值，则找出来，然后统一返回一个数组
this.charArr = this.charBakArr.filter(item => item.includes(this.inputval))
},
GetOrderData() {
//根据时间获取订单数据
}
}
}).mount("#app")
</script>
</div>
</body>
</htmI>
本文介绍了在Vue3中如何使用计算属性(myComputedName和myComputedNewList)与methods(myName和myNewList)的区别，强调了计算属性的缓存性能以及如何在计算属性中避免副作用。同时讲解了v-model的双向绑定和监听器（watch）的用法，包括字符串和对象属性的监听。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
