vue3 watch

setTimeout(()=>{count.value++;// states.obj.a.name ="更改后的name"// states.obj.b.age ="更改后20"states.obj.b.age++;states.num++;states.value++;states.ach++;otherCount.value++
},2000);// setTimeout(()=>{//   states.value++;
//   count.value ++
// },3000)const newReactive  = readonly(states); //只能获取不能更改// watch// ref这样监听
watch(count,(a,b,onInvalidate)=>{console.log(a,b)onInvalidate(() =>{console.log('onInvalidate')})
})// ref也可以这样监听
// watch(() => count.value,(a,b) => {// console.log(a,b)
// })// watch(() => states.obj,(a,b) => {// console.log(a,b)
// },{deep:true}
// );// raactive这样监听
// watch(() => states.num,(a,b) => { //reactive 中监听某个属性 数据源必须精确指定
//   console.log(a,b)
// });//     watch(()=>[states.value,states.num,states.ach], //多个数据监听
//             ([newnum, oldnum,newach],[newvalue, oldvalue,oldach])=>{//               // 新数据
//               console.log(newnum)
//               console.log(oldnum)
//               console.log(newach)
//               // 老数据
//               console.log(newvalue)
//               console.log(oldvalue)
//               console.log(oldach)
//         },{//          flush:'post'
//         });
//  watch没有flush:'post'在watch之后 有在之前
//     onBeforeUpdate(()=>{//       console.log('onBeforeUpdate')
//     })// 监听一段时间不监听
// var stop = watch(() => states.num,(a,b) => { //reactive 中监听某个属性 数据源必须精确指定
//   console.log(a,b)
// });
// setTimeout(()=>{//   stop()
// },2000)

vue3 watch相关推荐

【Vue】新建一个Vue3项目
目录 1.新建vue项目 2.路径更改至新建的vue项目处 3.安装cnpm 4.cnpm安装vant3 5.安装babel-plugin 6.安装vue路由 7.安装axios 其他注意事项仅用于 ...
vue 后台返回的文件流进行预览_基于 Vue3+Ts 后台前端管理系统Vue3-Admin
今天再给大家分享一款超不错的Vue中后台管理系统Vue3Admin. vue3-admin 基于VueCli4+Ts+ElementUI构建的后台系统.采用组件化开发模式及Flex布局,支持移动端适配 ...
vue3.0环境搭建
安装最新版nodejs Node.jshttps://nodejs.org/zh-cn/安装过程非常傻瓜,一直下一步到完成 -------------------------------------- ...
如何优雅的在 vue 中使用非响应式对象_一篇文章上手Vue3中新增的API
1. 初始化项目 // ① npm i -g @vue/cli // ② vue create my-project // ③ npm install @vue/composition-api -S/ ...
VUE3.0 二. vue-cli3 配置指南
VUE3.0 二. vue-cli3配置指南一.vue.config.js 详解官网地址: https://cli.vuejs.org/zh/config/ 使用vue3 的时候需要添加一个vue ...
VUE3.0 一.安装node.js、vue3.0脚手架
VUE3.0 一.安装node.js.vue3.0脚手架 1.安装nodejs 首先去官网下载nodejs 查看npm和node版本,出现版本号即安装成功. npm -v # 6.13.4node - ...
从Proxy到Vue3数据绑定
导言: 本菜鸡在Vue2没多久,结果就Vue3发布了.赶紧学习和体验了一番Vue3,发现和Vue2有较大不同.其中最让我印象深刻的是他们有一个叫ref和reactive的用来绑定和更新数据.然后再略微 ...
vue 组件以字符串插入_今日分享：vue3多层嵌套组件如何访问到最外层组件的数据？...
我们都知道在vue中父组件向子组件传参需要在组件使用的位置使用属性绑定的方式,然后在子组件中通过props接收父组件中传递过来的数据,如果涉及到多层组件嵌套我们需要涉及到好多次属性绑定和好多次prop ...
七种Vue3传值方式
七种Vue3传值方式 props emit v-model refs provide/inject eventBus vuex/pinia(状态管理工具) Props方式 Props方式是Vue中最常 ...
vue 不识别svg_vue中引用svg，vue引入svg不显示，vue引用svg配置，vue3.0+ts如何配置svg...
注意: 如果按照下面配置正确发现svg依然无法显示可能s'v'g-sprite-loader的版本过高,重新指定版本下载npm i svg-sprite-loader@3.8.0 --save-dev ...

vue3 watch

vue3 watch相关推荐

最新文章

热门文章