高端型网站建设,邯郸wap网站建设报价,网站空间查询工具,建筑人才网最新招聘信息息假期第二篇#xff0c;对于基础的知识点#xff0c;我感觉自己还是很薄弱的。 趁着假期#xff0c;再去复习一遍 之前已经记录了一篇【vue3基础知识点-computed和watch】 今天在学习的过程中发现#xff0c;之前记录的这一篇果然是很基础的#xff0c;很多东西都讲的不够…假期第二篇对于基础的知识点我感觉自己还是很薄弱的。 趁着假期再去复习一遍 之前已经记录了一篇【vue3基础知识点-computed和watch】 今天在学习的过程中发现之前记录的这一篇果然是很基础的很多东西都讲的不够细致 话不多说进入正题 vue2 vue2中的watch写法vue3可以向下兼容vue2的写法 templatedivh1当前求和为{{sum}}/h1button clicksum点我1/button/div /templatescript import { ref, watch } from vue; export default { name:demo, watch: {// vue2简单写法sum(newVal, oldVal) {console.log(sum的值变化了, newVal, oldVal);}//vue2完整写法sum:{handler(newVal,oldval){console.log(sum的值变化了, newVal, oldVal);},deep:true,immediate:true} }, setup(){let sum ref(0)return {sum} } }/script虽然vue3中可以使用vue2的写法但是混合使用会导致代码风格不一致增加维护成本。而且我们只是习惯了vue2的写法全都使用vue3的写法其实就是一个熟悉的过程vue3 的 script setup 语法和 Composition API组合式api还是很香的慢慢来吧 组合式api其实就是一堆内置的函数需要用什么就引入对应的函数如ref、wacth等 vue3 1、监听ref定义的单个响应式数据 templatedivh1当前求和为{{sum}}/h1button clicksum点我1/button/div /template script import { ref, watch } from vue; export default { name:demo, setup(){let sum ref(0)//第一个参数要监听的数据//第二个参数回调函数两种写法箭头函数或者普通函数都可以//在vue3中wathc的回调函数可以写成箭头函数因为setup中this是undefined没有响应式的this上下文//箭头函数写法watch(sum,(newVal,oldval){console.log(sum变了,newVal,oldval)unde})// 普通函数写法watch(sum,function(newVal,oldval){console.log(sum变了,newVal,oldval)})return {sum} }}2、监听ref定义的多个响应式数据 templatedivh1当前求和为{{sum}}/h1button clicksum点我1/buttonh2当前招呼语{{msg}}/h2button clickmsgwow点我打招呼/button/div /template script import { ref, watch } from vue; export default { name:demo, setup(){let sum ref(0)let msg ref(hello) //vue2中watch是配置项只能写一个vue3中watch是函数可以调用n次 watch(sum,(newVal,oldVal){console.log(sum变了,newVal,oldVal); }) watch(msg,(newVal,oldVal){console.log(msg,newVal,oldVal); })return {sum,msg} } } /script这种写法虽然可以多次调用watch函数但是还有更简化的写法 templatedivh1当前求和为{{ sum }}/h1button clicksum点我1/buttonh2当前招呼语{{ msg }}/h2button clickmsg wow点我打招呼/button/div /template script import { ref, watch } from vue; export default {name: demo,setup() {let sum ref(0);let msg ref(hello); //第一个参数为数组第二个参数为回调函数watch([sum, msg], (newVal, oldVal) {console.log(sum或msg变了, newVal, oldVal);});return {sum,msg,};}, }; /scriptvue3 watch中的参数第三个就是配置项 注意点监听ref定义的数据不需要写deeptrue简单数据类型不需要深度监听ref定义的对象本质上还是调用了reactive将其包装成响应式对象所以ref定义的对象默认开启了深度监听 watch(source: WatchSource, cb: WatchCallback, options?: WatchOptions): StopHandle source: 监听的源可以是响应式数据、计算属性或ref等 cb: 当源发生变化时被调用的回调函数 options可选: 一个对象包含额外的选项配置 返回一个停止监听的函数 let sum ref(0);let msg ref(hello);//监听单个watch(sum, (newVal, oldVal) {console.log(sum变了, newVal, oldVal);},{immediate:true});//监听多个watch([sum, msg], (newVal, oldVal) {console.log(sum或msg变了, newVal, oldVal);},{immediate:true});3、监听reactive定义的单个响应式数据的全部属性 templatediv h2姓名{{person.name}}/h2 h2性别{{person.sex}}/h2 button clickperson.name~姓名变了/buttonbutton clickperson.sex性别变了/button/div /template script import {reactive,watch } from vue; export default {name: demo,setup() {let person reactive({name:莲花,sex:男})watch(person, (newVal, oldVal) {console.log(person变了, newVal, oldVal);});return {person};}, }; /script这有个踩坑点recative定义的响应式数据交给watch进行监听此处无法正确的获得oldValuewatch默认只能追踪到响应式数据属性的变化但并不会记录变化前的旧值 如果reactive定义的数据嵌套很深在vue2中需要开启深度监听才能监听到但是vue3中却不需要 templatediv h2姓名{{person.name}}/h2 h2性别{{person.sex}}/h2 h2工作{{person.job.job1.work}}/h2 button clickperson.name~姓名变了/button br/ br/ br/ button clickperson.sex性别变了/button button clickperson.job.job1.work还有其他工作工作变了/button/div /template script import { ref, reactive,watch } from vue; export default {name: demo,setup() {let person reactive({name:莲花,sex:男,job:{job1:{work:侦探}} })watch(person, (newVal, oldVal) {console.log(person变了, newVal, oldVal);});return {person};}, }; /scriptreactive定义的数据强制开启了深度监听即使写deep:false,配置也无效无法手动关闭深度监听 4、监听reactive定义的单个响应式数据中的某一个属性 如果这样写是没有效果的 templatediv h2姓名{{person.name}}/h2 h2性别{{person.sex}}/h2 h2工作{{person.job.job1.work}}/h2 button clickperson.name~姓名变了/button br/ br/ br/ button clickperson.sex性别变了/button br/ br/ br/ button clickperson.job.job1.work还有其他工作工作变了/button/div /template script import { ref, reactive,watch } from vue; export default {name: demo,setup() { let person reactive({name:莲花,sex:男,job:{job1:{work:侦探}} })watch(person.name, (newVal, oldVal) {console.log(person.name变了, newVal, oldVal);});return { person};}, }; /script控制台中会提示这样不能监听只能监听ref定义的值或reactive生成的响应式对象或者是一个数组而person.name只是reactive生成的响应式对象中的一个属性 那么监听reactive生成的响应式对象中的一个属性写法应该是这样的 先写一个函数函数有返回值想监听谁就返回谁 templatediv h2姓名{{person.name}}/h2 h2性别{{person.sex}}/h2 h2工作{{person.job.job1.work}}/h2 button clickperson.name~姓名变了/button br/ br/ br/ button clickperson.sex性别变了/button br/ br/ br/ button clickperson.job.job1.work还有其他工作工作变了/button/div /template script import { ref, reactive,watch } from vue; export default {name: demo,setup() {let person reactive({name:莲花,sex:男,job:{job1:{work:侦探}} })watch(() person.name,(newValue, oldValue) {console.log(person变了 发生了变化: ${oldValue} - ${newValue});})return { person};}, }; /script5、监听reactive定义的单个响应式数据中的某一些属性 templatediv h2姓名{{person.name}}/h2 h2性别{{person.sex}}/h2 h2工作{{person.job.job1.work}}/h2 button clickperson.name~姓名变了/button br/ br/ br/ button clickperson.sex性别变了/button br/ br/ br/ button clickperson.job.job1.work还有其他工作工作变了/button/div /template script import { ref, reactive,watch } from vue; export default {name: demo,setup() {let person reactive({name:莲花,sex:男,job:{job1:{work:侦探}}})watch(//第一个参数改为数组//newValue, oldValue也会变成数组格式[ () person.name,() person.sex],(newValue, oldValue) {console.log(person的name或sex变了 ,newValue, oldValue);}) return { person};}, }; /script6、特殊情况监听jobjob是person中的对象直接这样写是监听不到的原因是改的内容层次比较深我们要改的是job中job1中的work let person reactive({name:莲花,sex:男,job:{job1:{work:侦探}}})watch(() person.job,(newValue, oldValue) {console.log(person的job变了 ,newValue, oldValue);}) 这个时候就需要配置项中配置deep了 watch(() person.job,(newValue, oldValue) {console.log(person的job变了 ,newValue, oldValue);},{deep:true})