{"id":394,"date":"2022-04-19T16:04:50","date_gmt":"2022-04-19T08:04:50","guid":{"rendered":"http:\/\/gjweb.top\/?p=394"},"modified":"2022-04-19T16:04:51","modified_gmt":"2022-04-19T08:04:51","slug":"02-ref-reactive-%e5%93%8d%e5%ba%94%e5%bc%8f%e5%bc%95%e7%94%a8%e7%9a%84%e7%94%a8%e6%b3%95%e5%92%8c%e5%8e%9f%e7%90%86","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=394","title":{"rendered":"02. ref ,reactive \u54cd\u5e94\u5f0f\u5f15\u7528\u7684\u7528\u6cd5\u548c\u539f\u7406"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"ref\">ref<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>ref \u5904\u7406\u57fa\u7840\u7c7b\u578b\u7684\u6570\u636e<\/li><li>\u539f\u7406\uff0c \u901a\u8fc7proxy \u5bf9\u6570\u636e\u8fdb\u884c\u5c01\u88c5\uff0c\u5f53\u6570\u636e\u53d8\u5316\u65f6\uff0c\u51fa\u53d1\u6a21\u677f\u7b49\u5185\u5bb9\u7684\u66f4\u65b0<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>const app = Vue.createApp({<br> &nbsp; &nbsp;template: `<br> &nbsp; &nbsp; &nbsp;&lt;div&gt;{{name}}&lt;\/div&gt;<br> &nbsp; &nbsp;`,<br> &nbsp; &nbsp;setup(props,contenxt){<br> &nbsp; &nbsp; &nbsp;const {ref} = Vue;<br> &nbsp; &nbsp; &nbsp;\/\/ proxy , \"dell\" \u53d8\u6210 proxy({valkue:'dell'})\u8fd9\u6837\u7684\u4e00\u4e2a\u54cd\u5e94\u5f0f\u5f15\u7528<br> &nbsp; &nbsp; &nbsp;let name = ref('dell');<br> &nbsp; &nbsp; &nbsp;setTimeout(()=&gt;{<br> &nbsp; &nbsp; &nbsp; &nbsp;name.value = 'lee'<br> &nbsp; &nbsp;  },5000)<br> &nbsp; &nbsp; &nbsp;return{name}<br> &nbsp;  }<br>})<br>const vm = app.mount('#root');<br>\u200b<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ref-\u83b7\u53d6dom\u8282\u70b9\">ref \u83b7\u53d6dom\u8282\u70b9<\/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 {ref , onMounted} = Vue;<br> &nbsp; &nbsp; &nbsp; &nbsp;const hello = ref(null);<br> &nbsp; &nbsp; &nbsp; &nbsp;onMounted(()=&gt;{<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log(hello.value) \/\/ \u8f93\u51fa\u9875\u9762\u7684\u5143\u7d20<br> &nbsp; &nbsp; &nbsp;  });<br> &nbsp; &nbsp; &nbsp; &nbsp;return{ hello }<br> &nbsp;  },<br> &nbsp; &nbsp;template:`<br>        &lt;div ref=\"hello\"&gt;hello world&lt;\/div&gt;<br>    <br>    `<br>})<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"reactive\">reactive<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>\u5904\u7406\u975e\u57fa\u7840\u7c7b\u578b\u7684\u6570\u636e<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>const app = Vue.createApp({<br> &nbsp; &nbsp;template:`<br> &nbsp; &nbsp; &nbsp;&lt;div&gt;{{nameObj.name}}&lt;\/div&gt;<br> &nbsp; &nbsp;`,<br> &nbsp; &nbsp;setup(props,contenxt){<br> &nbsp; &nbsp; &nbsp;const {reactive} = Vue;<br> &nbsp; &nbsp; &nbsp;\/\/ proxy,{name:'dell'}\u7f16\u7a0bproxy({name:'dell'})\u8fd9\u6837\u7684\u54cd\u5e94\u5f0f\u5f15\u7528<br> &nbsp; &nbsp; &nbsp;const nameObj = reactive({name:\"dell\"});<br> &nbsp; &nbsp; &nbsp;setTimeout(()=&gt;{<br> &nbsp; &nbsp; &nbsp; &nbsp;nameObj.name = \"hello world\"<br> &nbsp; &nbsp;  },5000)<br> &nbsp; &nbsp; &nbsp;return {nameObj}<br> &nbsp;  }<br>})<br>const vm = app.mount('#root');<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"readonly\">readonly<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>\u5c06\u5bf9\u8c61\u53d8\u6210\u53ea\u8bfb\u5c5e\u6027<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>const app = Vue.crateApp({<br> &nbsp; &nbsp;template:`<br>        &lt;div&gt;{{nameObj.name}}&lt;\/div&gt;<br>    `,<br> &nbsp; &nbsp;setup(props,contenxt){<br> &nbsp; &nbsp; &nbsp; &nbsp;const {readonly} = Vue;<br> &nbsp; &nbsp; &nbsp; &nbsp;const nameObj = readonly({name:\"dell\"})<br> &nbsp; &nbsp; &nbsp; &nbsp;setTimeout(()=&gt;{<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;nameObj.name = \"hello world\"<br> &nbsp; &nbsp; &nbsp;  },5000)<br> &nbsp; &nbsp; &nbsp;  return {nameObj}<br> &nbsp;  }<br>})<br>const vm = app.mount(\"#root\")<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"torefs\">toRefs<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>\u7528\u4e8e\u5bf9\u8c61\u7684\u6790\u6784\u8d4b\u503c<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>const app = Vue.crateApp({<br> &nbsp; &nbsp;template:`<br>        &lt;div&gt;{{name}}&lt;\/div&gt;<br>    `,<br> &nbsp; &nbsp;setup(props,contenxt){<br> &nbsp; &nbsp; &nbsp; &nbsp;const {reactive,toRefs} = Vue;<br> &nbsp; &nbsp; &nbsp; &nbsp;const nameObj = reactive({name:\"dell\"})<br> &nbsp; &nbsp; &nbsp; &nbsp;setTimeout(()=&gt;{<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;nameObj.name = \"hello world\"<br> &nbsp; &nbsp; &nbsp;  },5000)<br> &nbsp; &nbsp; &nbsp; &nbsp;\/\/ toRefs proxy({name:'dell'}),{name:proxy({values:'dell'})}<br> &nbsp; &nbsp; &nbsp; &nbsp;const {name} = toRefs(nameObj)<br> &nbsp; &nbsp; &nbsp;  return {name}<br> &nbsp;  }<br>})<br>const vm = app.mount(\"#root\")<\/code><\/pre>\n\n\n\n<p>\u4e0a\u9762\u7684 <strong><em>toRefs<\/em><\/strong> \u4e2d\u5982\u679c\u5728 <strong><em>reactive({name:&#8221;dell&#8221;})<\/em><\/strong> \u4e2d<strong>\u6dfb\u52a0\u5bf9\u8c61<\/strong>\u662f\u5c5e\u6027\u662f<strong>\u65e0\u6cd5\u5b9e\u73b0\u53cc\u5411\u6570\u636e\u7ed1\u5b9a<\/strong>\u7684, \u89e3\u51b3 toRef<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toref\">toRef<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>const app = Vue.createApp({<br> &nbsp; &nbsp;template:`<br>        &lt;div&gt;{{age}}&lt;\/div&gt;  <br>    `,<br> &nbsp; &nbsp;setup(props,contenxt){<br> &nbsp; &nbsp; &nbsp; &nbsp;const {reactive,toRef} = Vue;<br> &nbsp; &nbsp; &nbsp; &nbsp;const nameObj = reactive({name:'dell'})<br> &nbsp; &nbsp; &nbsp; &nbsp;setTimeout(()=&gt;{<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;nameObj.age = \"18\"<br> &nbsp; &nbsp; &nbsp;  },5000)<br> &nbsp; &nbsp; &nbsp; &nbsp;const age = toRef(nameObj,\"age\");<br> &nbsp;      return {age}<br> &nbsp;  }<br>})<br>const vm = app.mount(\"#root\")<\/code><\/pre>\n\n\n\n<p>\u4e0a\u9762\u7684 <strong><em>toRef<\/em><\/strong> \u5c5e\u6027\u53ef\u4ee5\u5728\u539f\u6709\u5bf9\u8c61\u4e2d\u589e\u6dfb\u65b0\u7684\u5c5e\u6027,\u5e76\u8fdb\u884c\u53cc\u5411\u6570\u636e\u7ed1\u5b9a\u5904\u7406.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toraw\">toRaw<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>\u5c06 reactive \u7684\u54cd\u5e94\u5f0f\u5bf9\u8c61\u8f6c\u6362\u6210\u4e00\u4e2a\u65b0\u7684\u5bf9\u8c61\uff08\u6b64\u5bf9\u8c61\u4e0d\u53d7\u54cd\u5e94\u5f0f\u63a7\u5236\uff09<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;<br>    import {reactive,toRaw} from \"vue\"<br>    export default {<br> &nbsp; &nbsp; &nbsp; &nbsp;name:\"xxx\",<br> &nbsp; &nbsp; &nbsp; &nbsp;setup(){<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;const textData = ractive({name:\"text\"})<br>         &nbsp; const toRawText = toRaw(textData)<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  toRawText.name = \"xxx\"<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log(textData.name ==== toRawText.name) \/\/ false<br> &nbsp; &nbsp; &nbsp;  }<br> &nbsp;  }<br>&lt;\/script&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>ref ref \u5904\u7406\u57fa\u7840\u7c7b\u578b\u7684\u6570\u636e \u539f\u7406\uff0c \u901a\u8fc7proxy \u5bf9\u6570\u636e\u8fdb\u884c\u5c01\u88c5\uff0c\u5f53\u6570\u636e\u53d8\u5316\u65f6\uff0c\u51fa\u53d1\u6a21\u677f\u7b49\u5185\u5bb9\u7684\u66f4\u65b0 [&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-394","post","type-post","status-publish","format-standard","hentry","category-composition"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/394","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=394"}],"version-history":[{"count":1,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/394\/revisions"}],"predecessor-version":[{"id":395,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/394\/revisions\/395"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}