vue3.0 watch监听器使用方法

Vue2

export default {watch:{}}

Vue3

1、侦听ref创建的data数据

 import {ref,watch,} from 'vue'

export default {setup() {const name = ref("张三")/*** watch：侦听数据变化* oldvalue：系统自动注入，更新之前的数据* value：系统自动注入，更新之后的最新数据* **/// 普通侦听器watch(name, function (value, oldvalue) {console.log(value, oldvalue)})return {name,}},}

2、侦听 reactive 创建的data数据

 import {ref,reactive,} from 'vue'

setup中监听某个对象属性（不可以）

export default {setup() {const user = reactive({name: ''})//不支持侦听某个对象的属性user.name（Vue2中可以使用）watch(user.name, function (value, oldvalue) {console.log(value, oldvalue)})//只可以监听对象watch(user, function (value, oldvalue) {console.log(value, oldvalue)})return {user,}},}

组件内对象中监听某个对象属性

    setup() {const user = reactive({name: ''})watch(user.name, function (value, oldvalue) {console.log(value, oldvalue)})return {user}},data() {return {list: ["vue", "uniapp", ""]}},//组件内监听：watch: {"user.name": function (value, oldvalue) {console.log(value, oldvalue)},// vue3中对数组元素可进行操作,侦听器侦听不到list(value, oldvalue) {console.log(value, oldvalue)}},

3、对数组元素进行侦听

<!-- home.vue  -->
<template><div><!-- <h1>{{msg}}</h1> --><!-- <h1>{{reverseMsg}}</h1> -->ref创建执行：<input type="text" v-model="name" placeholder="请输入姓名"><hr>setup内执行：<input type="text" v-model="user.name" placeholder="请输入姓名"><hr>组件内执行：<input type="text" v-model="user.age" placeholder="请输入姓名"><hr><el-button type="primary" @click="handleName">修改</el-button></div>
</template>
<script>// 按需导入import {reactive,toRefs,ref,watch,computed} from 'vue'export default {setup() {const name = ref("张三")const user = reactive({name: '',age: ""})/*** watch：侦听数据变化* oldvalue：系统自动注入，更新之前的数据* value：系统自动注入，更新之后的最新数据* **/// 普通侦听器watch(name, function (value, oldvalue) {console.log(value, oldvalue)})// 普通侦听器watch(name, function (value, oldvalue) {console.log(value, oldvalue)}, {deep: true})return {name,user}},data() {return {list: ["vue", "uniapp", ""]}},watch: {"user.age": function (value, oldvalue) {console.log(value, oldvalue)},// vue3中对数组元素可进行操作,侦听器侦听不到,必须使用深度侦听器来侦听list(value, oldvalue) {console.log(value, oldvalue)},// 深度侦听器来侦听list: {handle(value, oldvalue) {console.log(value, oldvalue)},deep: true}},methods: {handleName() {this.msg = this.reverseMsg}},}
</script><style>
</style>

vue3.0 watch监听器使用方法相关推荐

Vue3.0快速入门
一.安装 1. cdn <script src="https://unpkg.com/vue@next"></script> 2. npm $npm ins ...
Vue3.0新特性及使用方法
1.1创建Vue3.0项目通过脚手架 vite 安装: npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue3 Vite目 ...
Vue3.0如何在setup中获取定义的全局方法
有些情况下我们需要定义全局方法然而在vue3.0中我们定义全局方法需要在globalProperties上面定义大部分情况下还是可以定义在main.js中的我们这里就以定义在main.js中为例 ...
vue3.0 父组件调用子组件方法及获取子组件的值
vue3.0 父组件调用子组件方法及获取子组件的值通过对比2.0的获取及调用方式这里我们也可以借鉴2.0中的this.$refs去获取3.0和2.0的refs获取的方式有点大同小异,但是思路还是一样 ...
前端开发：Vue3.0提示警告Avoid app logic that relies on enumerating keys on a component instance… 的解决方法
前言在前端开发中使用Vue的开发者都知道,Vue目前已经以Vue3.0为基础版本了,也就是说Vue3.0已经成为主流版本了.还在只用Vue2.0开发没有使用Vue3.0的开发者要注意了,要赶紧熟悉和 ...
Vue最全知识点，面试必备（基础到进阶，覆盖vue3.0，持续更新整理，欢迎补充讨论）
声明:本篇文章纯属笔记性文章,非整体原创,是对vue知识的整理,对自己有很大帮助才分享出来,参考文章传送:1.童欧巴对vue知识的整理 2.我是你的超级英雄对vue知识的整理 3.vue官网基础篇 ...
Vue3.0.0-beta.1 今天它来了！！！
2020 年 04 月 17 日,尤小右微博发布 Vue 3.0 beta 了! 看到的第一眼也是觉得学不动了!第二天,真香~所以本 Chat 简单分享下我的体验. 序 2020 年 4 月 17 日 ...
Vue3.0系列(一): VUE3.0的新特性
和Vue2.0 相比,Vue3.0有哪些亮点: 序号特性解析 1 Performance 性能上比Vue2.0快1.3-2倍 2 Tree shaking support 按需编译,体积更加轻量化 ...
覆盖vue3.0的最全Vue知识点
声明:本篇文章纯属笔记性文章,非整体原创,是对vue知识的整理,对自己有很大帮助才分享出来,参考文章传送:1.童欧巴对vue知识的整理 2.我是你的超级英雄对vue知识的整理 3.vue官网基础 ...

vue3.0 watch监听器使用方法

vue3.0 watch监听器使用方法

Vue2

Vue3

vue3.0 watch监听器使用方法相关推荐

最新文章

热门文章