script手表(fieldscript手表)

<template>\n<div>\n<inputtype="text"v-model="user.firstName"placeholder="姓"/>\n<inputtype="text"v-model="user.lastName"placeholder="名"/>\n<br/>\n<h1>姓名：{{name1}}</h1>\n<span>修改名字</span\n><inputtype="text"v-model="lastName"placeholder="名"/>\n\n<br>\n<p>watch</p>\n<button@click="onClick">修改</button>\n<p>{{user1}}</p>\n<p>{{user2}}</p>\n<p>{{count}}</p>\n</div>\n</template>\n\n<script>\nimport{reactive,computed,watch,watchEffect,ref}from"vue";\nexportdefault{\nsetup(){\nconstuser=reactive({\nfirstName:"张",\nlastName:"三",\n});\n\nconstuser1=reactive({\nname:'李四',\nage:20\n})\n\nconstuser2=reactive({\nname:'王五',\nage:27\n})\n\n//计算属性如果只传入一个函数，表示是getter的回调\nconstname1=computed(()=>{\nreturnuser.firstName+user.lastName;\n});\n\n//也接受一个配置对象\nconstlastName=computed({\nget(){\nreturnuser.lastName;\n},\nset(value){\nuser.lastName=value;\n},\n});\n\n//侦听器数据源--响应式对象\nwatch(user,(value)=>{\nconsole.log(value);\n},{\nimmediate:true,//初始化执行\ndeep:true\n});\n//响应式对象中的一个属性\nwatch(()=>user.lastName,(value)=>{\nconsole.log(value);\n},{\nimmediate:true,//初始化执行\ndeep:true\n});\n\n//侦听多个源\nwatch([user1,user2],([newUser1,newUser2],[prevUser1,prevUser])=>{\nconsole.log(newUser1,prevUser1);\nconsole.log(newUser2,prevUser);\n},{immediate:true})\n\nconstonClick=()=>{\nuser1.age++\nuser2.age++\ncount.value++\n}\n\n//watchEffect与watch区别\n//不需要手动传入依赖,自动手机函数内部的变量\n//每次初始化时会执行一次回调函数来自动获取依赖\n//无法获取到原值，只能得到变化后的值\nconstcount=ref(0);\nwatchEffect(()=>{\nconsole.log(count.value);\n})\n\nreturn{\nuser,\nname1,\nlastName,\nuser1,\nuser2,\nonClick,\ncount\n};\n},\n};\n</script>\n\n<stylelang="scss"scoped>\n</style>