本篇文章带大家学习vue3，深入聊聊计算属性computed与侦听器watch的使用方法，希望对大家有所帮助！
一、watch
<template>
<p>{{ obj.hobby.eat }}</p>
<button @click="obj.hobby.eat = '面条'">click</button>
</template>
<script>
import { watch, reactive } from 'vue'
export default {
name: 'App',
setup() {
const obj = reactive({
name: 'ifer',
hobby: {
eat: '西瓜',
},
})
watch(obj, (newValue, oldValue) => {
// 注意1：监听对象的时候，新旧值是相等的
// 注意2：强制开启深度监听，配置无效
console.log('触发监听');
console.log(newValue === oldValue) // true
})
return { obj }
},
}
</script>注意点：对 reactive 自身的修改则不会触发监听。【相关推荐：vuejs视频教程、web前端开发】
<template>
<p>{{ obj.hobby.eat }}</p>
<button @click="obj.hobby = { eat: '面条' }">click</button>
</template>
<script>
import { watch, reactive } from 'vue'
export default {
name: 'App',
setup() {
const obj = reactive({
name: 'ifer',
hobby: {
eat: '西瓜',
},
})
watch(obj.hobby, (newValue, oldValue) => {
// obj.hobby = { eat: '面条' }
console.log('对 reactive 自身的修改不会触发监听')
})
return { obj }
},
}
</script>
一定得注意不能修改reactive本身，修改本身不触发
- 2.1监听一个 ref 数据
<template>
<p>{{ age }}</p>
<button @click="age++">click</button>
</template>
<script>
import { watch, ref } from 'vue'
export default {
name: 'App',
setup() {
const age = ref(18)
// 监听 ref 数据 age，会触发后面的回调，不需要 .value
watch(age, (newValue, oldValue) => {
console.log(newValue, oldValue)
})
return { age }
},
}
</script>- 2.2监听多个 ref 数据
可以通过数组的形式，同时监听 age 和 num 的变化。
<template>
<p>age: {{ age }} num: {{ num }}</p>
<button @click="handleClick">click</button>
</template>
<script>
import { watch, ref } from 'vue'
export default {
name: 'App',
setup() {
const age = ref(18)
const num = ref(0)
const handleClick = () => {
age.value++
num.value++
}
// 数组里面是 ref 数据
watch([age, num], (newValue, oldValue) => {
console.log(newValue, oldValue)
})
return { age, num, handleClick }
},
}
</script>
立即触发监听属性：
{
immediate: true,
}<template>
<p>{{ age }}</p>
<button @click="handleClick">click</button>
</template>
<script>
import { watch, ref } from 'vue'
export default {
name: 'App',
setup() {
const age = ref(18)
const handleClick = () => {
age.value++
}
watch(
age,
(newValue, oldValue) => {
console.log(newValue, oldValue) // 18 undefined
},
{
immediate: true,
}
)
return { age, handleClick }
},
}
</script>
开启深度监听 ref 数据
? 问题：修改 ref 对象里面的数据并不会触发监听，说明 ref 并不是默认开启 deep 的。见下
<template>
<p>{{ obj.hobby.eat }}</p>
<button @click="obj.hobby.eat = '面条'">修改 obj.hobby.eat</button>
</template>
<script>
import { watch, ref } from 'vue'
export default {
name: 'App',
setup() {
const obj = ref({
hobby: {
eat: '西瓜',
},
})
// 注意：ref 监听对象，默认监听的是这个对象地址的变化
watch(obj, (newValue, oldValue) => {
console.log(newValue === oldValue)
})
return { obj }
},
}
</script>
面对这样的没有触发watch我们解决办法有三个：
- 解决 1：当然直接修改整个对象的话肯定是会被监听到的（注意模板中对 obj 的修改，相当于修改的是 obj.value）。
-`{{ obj.hobby.eat }}
`
- 解决 2：开启深度监听 ref 数据。
watch(
obj,
(newValue, oldValue) => {
console.log(newValue, oldValue)
console.log(newValue === oldValue)
},
{
deep: true,
}
)就加上一句话，故此没有截图
- 解决 3：还可以通过监听 ref.value 来实现同样的效果。
因为 ref 内部如果包裹对象的话，其实还是借助 reactive 实现的，可以通过 isReactive 方法来证明。
<template>
<p>{{ obj.hobby.eat }}</p>
<button @click="obj.hobby.eat = '面条'">修改 obj</button>
</template>
<script>
import { watch, ref } from 'vue'
export default {
name: 'App',
setup() {
const obj = ref({
hobby: {
eat: '西瓜',
},
})
watch(obj.value, (newValue, oldValue) => {
console.log(newValue, oldValue)
console.log(newValue === oldValue)
})
return { obj }
},
}
</script>
- 监听普通数据
监听响应式对象中的某一个普通属性值，要通过函数返回的方式进行（如果返回的是对象/响应式对象，修改内部的数据需要开启深度监听）。
<template>
<p>{{ obj.hobby.eat }}</p>
<button @click="obj.hobby.eat = '面条'">修改 obj</button>
</template>
<script>
import { watch, reactive } from 'vue'
export default {
name: 'App',
setup() {
const obj = reactive({
hobby: {
eat: '西瓜',
},
})
// 把 obj.hobby 作为普通值去进行监听，只能监听到 obj.hobby 自身的变化
/* watch(
() => obj.hobby,
(newValue, oldValue) => {
console.log(newValue, oldValue)
console.log(newValue === oldValue)
}
) */
// 如果开启了深度监听，则能监听到 obj.hobby 和内部数据的所有变化
/* watch(
() => obj.hobby,
(newValue, oldValue) => {
console.log(newValue, oldValue)
console.log(newValue === oldValue)
},
{
deep: true,
}
) */
// 能监听影响到 obj.hobby.eat 变化的操作，例如 obj.hobby = { eat: '面条' } 或 obj.hobby.eat = '面条'，如果是 reactive 直接对 obj 的修改则不会被监听到（ref 可以）
watch(
() => obj.hobby.eat,
(newValue, oldValue) => {
console.log(newValue, oldValue)
console.log(newValue === oldValue)
}
)
return { obj }
},
}
</script>二、computed
作用：computed 函数用来定义计算属性，上述的基础概念都是同vue2一样的，关于vue2中这两个知识点的定义大家可以移步：【vue2】计算与侦听的用法。
<template>
<p>firstName: {{ person.firstName }}</p>
<p>lastName: {{ person.lastName }}</p>
<input type="text" v-model="person.fullName" />
</template>
<script>
import { computed, reactive } from 'vue'
export default {
name: 'App',
setup() {
const person = reactive({
firstName: '初',
lastName: '映',
})
// 也可以传入对象，目前和上面等价
person.fullName = computed({
get() {
return person.firstName + '*' + person.lastName
},
set(value) {
console.log(value,'value');//为上述get的返回值
const newArr = value.split('*')
person.firstName = newArr[0]
person.lastName = newArr[1]
},
})
return {
person,
}
},
}
</script>
以上是聊聊vue3中watch和computed的使用方法的详细内容。更多信息请关注PHP中文网其他相关文章！
vue.js和前端堆栈：了解连接Apr 24, 2025 am 12:19 AMVue.js与前端技术栈紧密集成，提升开发效率和用户体验。1)构建工具：与Webpack、Rollup集成，实现模块化开发。2)状态管理：与Vuex集成，管理复杂应用状态。3)路由：与VueRouter集成，实现单页面应用路由。4)CSS预处理器：支持Sass、Less，提升样式开发效率。
Netflix：探索React（或其他框架）的使用Apr 23, 2025 am 12:02 AMNetflix选择React来构建其用户界面，因为React的组件化设计和虚拟DOM机制能够高效处理复杂界面和频繁更新。1）组件化设计让Netflix将界面分解成可管理的小组件，提高了开发效率和代码可维护性。2）虚拟DOM机制通过最小化DOM操作，确保了Netflix用户界面的流畅性和高性能。
vue.js和前端：深入研究框架Apr 22, 2025 am 12:04 AMVue.js被开发者喜爱因为它易于上手且功能强大。1)其响应式数据绑定系统自动更新视图。2)组件系统提高了代码的可重用性和可维护性。3)计算属性和侦听器增强了代码的可读性和性能。4)使用VueDevtools和检查控制台错误是常见的调试技巧。5)性能优化包括使用key属性、计算属性和keep-alive组件。6)最佳实践包括清晰的组件命名、使用单文件组件和合理使用生命周期钩子。
vue.js在前端的力量：关键特征和好处Apr 21, 2025 am 12:07 AMVue.js是一个渐进式的JavaScript框架，适用于构建高效、可维护的前端应用。其关键特性包括：1.响应式数据绑定，2.组件化开发，3.虚拟DOM。通过这些特性，Vue.js简化了开发过程，提高了应用性能和可维护性，使其在现代Web开发中备受欢迎。
vue.js比反应好吗？Apr 20, 2025 am 12:05 AMVue.js和React各有优劣，选择取决于项目需求和团队情况。1)Vue.js适合小型项目和初学者，因其简洁和易上手；2)React适用于大型项目和复杂UI，因其丰富的生态系统和组件化设计。
vue.js的功能：增强前端的用户体验Apr 19, 2025 am 12:13 AMVue.js通过多种功能提升用户体验：1.响应式系统实现数据即时反馈；2.组件化开发提高代码复用性；3.VueRouter提供平滑导航；4.动态数据绑定和过渡动画增强交互效果；5.错误处理机制确保用户反馈；6.性能优化和最佳实践提升应用性能。
vue.js：定义其在网络开发中的作用Apr 18, 2025 am 12:07 AMVue.js在Web开发中的角色是作为一个渐进式JavaScript框架，简化开发过程并提高效率。1)它通过响应式数据绑定和组件化开发，使开发者能专注于业务逻辑。2)Vue.js的工作原理依赖于响应式系统和虚拟DOM，优化性能。3)实际项目中，使用Vuex管理全局状态和优化数据响应性是常见实践。
了解vue.js：主要是前端框架Apr 17, 2025 am 12:20 AMVue.js是由尤雨溪在2014年发布的渐进式JavaScript框架，用于构建用户界面。它的核心优势包括：1.响应式数据绑定，数据变化自动更新视图；2.组件化开发，UI可拆分为独立、可复用的组件。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
SublimeText3 英文版
推荐：为Win版本，支持代码提示！
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
mPDF
mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），
禅工作室 13.0.1
功能强大的PHP集成开发环境
