本文主要介绍 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.计算属性 导入computedimport { createApp, reactive, computed } from './vue.esm-browser.js'createApp({setup() {const data = reactive({ // 创建响应式数据 datax: 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.返回subsub}}}).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.导入监听器 watchimport { createApp, ref, reactive, watch } from './vue.esm-browser.js'createApp({setup() {// 0.ref创建响应式数据hobby 存储单个基本数据类型const hobby = ref("") //爱好 默认空字符串 选中“请选择”选项// 0.reactive创建响应式数据dataconst 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.导入自动监听 watchEffectimport { 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 中的计算属性和监听器