{"id":400,"date":"2022-04-19T16:07:08","date_gmt":"2022-04-19T08:07:08","guid":{"rendered":"http:\/\/gjweb.top\/?p=400"},"modified":"2022-04-19T16:07:10","modified_gmt":"2022-04-19T08:07:10","slug":"05-watch-%e5%92%8c-watcheffect-%e7%9a%84%e4%bd%bf%e7%94%a8%e5%92%8c%e5%b7%ae%e5%bc%82%e6%80%a7","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=400","title":{"rendered":"05. watch \u548c watchEffect \u7684\u4f7f\u7528\u548c\u5dee\u5f02\u6027"},"content":{"rendered":"\n<ul class=\"wp-block-list\"><li>watch\u76d1\u542c\u5668<ul><li>\u5177\u5907\u4e00\u5b9a\u7684\u60f0\u6027 lazy ( \u9875\u9762\u7b2c\u4e00\u6b21\u52a0\u8f7d\u7684\u65f6\u5019\u4e0d\u4f1a\u76d1\u542c )<\/li><li>\u53c2\u6570\u53ef\u4ee5\u62ff\u5230\u539f\u59cb\u548c\u5f53\u524d\u7684\u503c<\/li><li>\u57fa\u672c\u6570\u636e\u7c7b\u578b \u548c \u5bf9\u8c61\u7684\u7528\u6cd5\u7565\u6709\u4e0d\u540c<\/li><\/ul><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u57fa\u672c\u7528\u6cd5\">\u57fa\u672c\u7528\u6cd5<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>const app = Vue.createApp({<br> &nbsp; &nbsp;setup(){<br> &nbsp; &nbsp; &nbsp; &nbsp;const {reactive , watch , toRefs} = Vue;<br> &nbsp; &nbsp; &nbsp; &nbsp;const &nbsp;name = reactive(0);<br> &nbsp; &nbsp; &nbsp; &nbsp;\/* \u57fa\u672c\u6570\u636e\u7c7b\u578b<br> &nbsp; &nbsp; &nbsp;  watch(name,(newValue,oldValue)=&gt;{<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  console.log(newValue,oldValue)<br> &nbsp; &nbsp; &nbsp;  })<br> &nbsp; &nbsp; &nbsp;  *\/<br> &nbsp; &nbsp; &nbsp; &nbsp;\/\/ \u5f15\u7528\u7c7b\u578b<br> &nbsp; &nbsp; &nbsp; &nbsp;const nameObj = reactive({name:\"dell\"})<br> &nbsp; &nbsp; &nbsp; &nbsp;const {name} = toRefs(nameObj)<br> &nbsp; &nbsp; &nbsp; &nbsp;watch(()=&gt;nameObj.name,(newValue,oldValue)=&gt;{<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log(newValue,oldValue)<br> &nbsp; &nbsp; &nbsp;  })<br> &nbsp; &nbsp; &nbsp; &nbsp;return {name}<br> &nbsp;  },<br> &nbsp; &nbsp;template:`<br>        &lt;div&gt;<br>            &lt;div&gt;<br>                Name: &lt;input v-model=\"name\"&gt;<br>            &lt;\/div&gt;<br>            &lt;div&gt;<br>                name is {{name}}<br>            &lt;\/div&gt;<br>        &lt;\/div&gt;  <br>    `<br>})<br>\u200b<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u7528\u4e00\u4e2a\u76d1\u542c\u5668\u627f\u8f7d-\u591a\u4e2a\u6570\u636e\u7684\u53d8\u5316\">\u7528\u4e00\u4e2a\u76d1\u542c\u5668\u627f\u8f7d,\u591a\u4e2a\u6570\u636e\u7684\u53d8\u5316<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>const app = Vue.createApp({<br> &nbsp; &nbsp;setup(){<br> &nbsp; &nbsp; &nbsp; &nbsp;const {reactive,watch,toRefs} = Vue;<br> &nbsp; &nbsp; &nbsp; &nbsp;const nameObj = reactive({<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;name:\"dell\",<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;engName:\"lee\"<br> &nbsp; &nbsp; &nbsp;  })<br> &nbsp; &nbsp; &nbsp; &nbsp;watch(&#91;()=&gt;nameObj.name,()=&gt;nameObj.engName],(&#91;newName,newEngNam],&#91;oldName,oldEngName])=&gt;{<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log(newName,oldName)<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log(newEngNam,oldEngName)<br> &nbsp; &nbsp; &nbsp;  },{immediate:true}) \/\/ {immediate:true} \u5b9e\u73b0watchEffecti\u7684\u975e\u60f0\u6027\u76d1\u542c<br> &nbsp; &nbsp; &nbsp; &nbsp;const {name,engName} = toRefs(nameObj)<br> &nbsp; &nbsp; &nbsp; &nbsp;return {name , engName}<br> &nbsp;  }<br>})<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"watcheffect\">watchEffect<\/h1>\n\n\n\n<ul class=\"wp-block-list\"><li>\u7acb\u5373\u6267\u884c,\u6ca1\u6709\u60f0\u6027 immediate<\/li><li>\u4e0d\u9700\u8981\u4f20\u9012\u8981\u4fa6\u542c\u7684\u5185\u5bb9, \u81ea\u52a8\u4f1a\u611f\u77e5\u4ee3\u7801\u4f9d\u8d56 , \u4e0d\u9700\u8981\u4f20\u9012\u5f88\u591a\u53c2\u6570 , \u53ea\u8981\u4f20\u9012\u4e00\u4e2a\u56de\u8c03\u51fd\u6570<\/li><li>\u4e0d\u80fd\u83b7\u53d6\u4e4b\u524d\u7684\u6570\u636e\u503c<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>const app = Vue.createApp({<br> &nbsp; &nbsp;setup(){<br> &nbsp; &nbsp; &nbsp; &nbsp;const {reactive,watchEffect,toRefs} = Vue;<br> &nbsp; &nbsp; &nbsp; &nbsp;const nameObj = reactive({<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;name:\"dell\",<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;engName:\"lee\"<br> &nbsp; &nbsp; &nbsp;  })<br> &nbsp; &nbsp; &nbsp; &nbsp;watchEffect(()=&gt;{<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log(nameObj.name);<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log(nameObj.engName)<br> &nbsp; &nbsp; &nbsp;  })<br> &nbsp; &nbsp; &nbsp; &nbsp;const {name,engName} = toRefs(nameObj)<br> &nbsp; &nbsp; &nbsp; &nbsp;return {name , engName}<br> &nbsp;  }<br>})<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>watch\u76d1\u542c\u5668 \u5177\u5907\u4e00\u5b9a\u7684\u60f0\u6027 lazy ( \u9875\u9762\u7b2c\u4e00\u6b21\u52a0\u8f7d\u7684\u65f6\u5019\u4e0d\u4f1a\u76d1\u542c ) \u53c2\u6570\u53ef\u4ee5\u62ff\u5230\u539f\u59cb\u548c\u5f53\u524d\u7684\u503c  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[47],"tags":[],"class_list":["post-400","post","type-post","status-publish","format-standard","hentry","category-composition"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=400"}],"version-history":[{"count":1,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/400\/revisions"}],"predecessor-version":[{"id":401,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/400\/revisions\/401"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=400"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}