【Vue3入门1】04-计算属性 + 侦听器
本文主要介绍 vue3 中的计算属性和监听器.
目录
1. 计算属性 computed
2. 侦听器 watch
3. 自动监听器 watchEffect
1. 计算属性 computed
作用：有缓存 提高性能
代码演示：
<body>
<div id="app">
<h3>add: {{ add() }}</h3>
<h3>add: {{ add() }}</h3>
<!-- 4.这里是属性不是方法 所以不使用() -->
<h3>sub: {{ sub }}</h3>
<h3>sub: {{ sub }}</h3>
<!-- 5.打开控制台发现只输出了一次sub，这样提高了性能，不需要每次重复计算 -->
<!-- 6.计算属性根据其依赖的 响应式数据 变化 而 重新计算 -->
<!-- 7.使用文本框双向绑定来输入数字，手动更改时也会更新 并显示在页面上 同时调用方法或属性 -->
<!-- 这里.number确保获取的是数字而非字符串 -->
x <input type="text" v-model.number="data.x"> <br>
y <input type="text" v-model.number="data.y">
</div>
<script type="module">
// 模块化开发
// 1.计算属性 导入computed
import { createApp, reactive, computed } from './vue.esm-browser.js'
createApp({
setup() {
const data = reactive({ // 创建响应式数据 data
x: 10,
y: 20
})
// 定义add方法-无缓存
let add = () => {
console.log("add") //打印两次
// 在div中插值表达式只要调用就会打印 它没有缓存
return data.x + data.y
}
// 2.定义sub方法
// 注意：computed有缓存
// 利用computed属性 而非方法
// 形式：computed( ()=>{ } )
const sub = computed(() => {
console.log("sub") //打印两次
return data.x - data.y
})
return {
data,
add,
// 3.返回sub
sub
}
}
}).mount("#app")
</script>2. 侦听器 watch
当进行某操作时 进行监听并触发某些事件
代码演示：
<body>
<div id="app">
爱好
<select v-model="hobby">
<option value="">请选择</option>
<option value="1">写作</option>
<option value="2">画画</option>
<option value="3">运动</option>
</select>
<hr>
年
<select v-model="date.year">
<option value="">请选择</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
</select>
月
<select v-model="date.month">
<option value="">请选择</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<script type="module">
// 1.导入监听器 watch
import { createApp, ref, reactive, watch } from './vue.esm-browser.js'
createApp({
setup() {
// 0.ref创建响应式数据hobby 存储单个基本数据类型
const hobby = ref("") //爱好 默认空字符串 选中“请选择”选项
// 0.reactive创建响应式数据data
const date = reactive({ //日期
year: "2023", // 默认选中value=2023的选项
month: "10" // 默认选中value=10选项
})
// 2.监听hobby
// 形式：watch(监听对象, (newVlue,oldValue)=>{} )
watch(hobby,(newValue,oldValue)=>{
console.log("oldValue", oldValue, "newValue", newValue)
// 3.打开页面和控制台 选中画画 value=2 控制台：oldValue newValue 2
// 重新选 选中运动 控制台：oldValue 2 newValue 3
// 所以我们可以通过watch知道是否切换了下拉框 以及切换前后的状态
// 4.当我点击画画时，控制台同时输出画画
if(newValue == 2){
console.log('画画')
}
})
// 5.监听 date
// 形式同上
watch(date, (newValue, oldValue) => {
/*
6.注意：
JS中 对象和数组 是通过 引用 传递的, 而不是通过 值 传递
当修改对象或数组的值时, 实际上修改的是对象或数组的引用, 而不是创建一个新的对象或数组
所以，如果修改了对象或数组的值，那么打印出来的结果则是 修改后的值
*/
console.log("oldValue", oldValue, "newValue", newValue)
// 7.选中指定选项时 控制台打印对应内容
if (newValue.year == "2025") {
console.log("2025")
}
if (newValue.month == "11") {
console.log("11")
}
})
// 8.监听 date 中的某个属性 year
// 9.形式：watch( ()=>XXX属性, (newVlue,oldValue)=>{} )
// 10.原先第一个参数是常量 现在是匿名函数来指定某个属性
watch(() => date.year, (newValue, oldValue) => {
console.log("oldValue", oldValue, "newValue", newValue)
if (date.year == "2024") {
console.log("2024")
}
// 11.当选中2024后 控制台：oldValue 2023 newValue 2024
// 12.而不是对应的 0 1 2 直接打印他的属性值
})
return {
hobby,
date
}
}
}).mount("#app")
</script>
</body>3. 自动监听器 watchEffect
<script type="module">
/*
0.注意：
watch属于手动监听，需要显式指定要监听的属性, 并且只有当监听的属性发生变化时才会执行
若需要 更精细 地控制或需要获取到原值, 还是需要需要使用watch
*/
// 1.导入自动监听 watchEffect
import { createApp, ref, reactive, watchEffect } from './vue.esm-browser.js'
createApp({
setup() {
// 和刚刚的例子一样
const hobby = ref("") //爱好
const date = reactive({ //日期
year: "2023",
month: "10"
})
// 2.设置自动监听
// 形式：watch( ()=>{ } )
watchEffect(() => {
console.log("------ 监听开始")
if (hobby.value == "2") {
console.log("画画")
}
if (date.year == "2025") {
console.log("2025")
}
if (date.month == "11") {
console.log("11")
}
console.log("------ 监听结束")
})
return {
hobby,
date
}
}
}).mount("#app")
</script>
本文主要介绍 vue3 中的计算属性和监听器