{"id":693,"date":"2023-05-10T21:50:01","date_gmt":"2023-05-10T13:50:01","guid":{"rendered":"http:\/\/gjweb.top\/?p=693"},"modified":"2023-05-10T21:50:03","modified_gmt":"2023-05-10T13:50:03","slug":"04-%e8%ae%a1%e7%ae%97%e5%b1%9e%e6%80%a7%e5%92%8c%e7%9b%91%e5%90%ac%e5%b1%9e%e6%80%a7","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=693","title":{"rendered":"04.\u8ba1\u7b97\u5c5e\u6027\u548c\u76d1\u542c\u5c5e\u6027"},"content":{"rendered":"\n

\u8ba1\u7b97\u5c5e\u6027<\/h2>\n\n\n\n

\u65b9\u5f0f\u4e00<\/h3>\n\n\n\n
<script setup lang=\"ts\">
import {computed ,ref} from \"vue\"
const name = ref(\"\u4f60\u597d\")
const helloName = computed(()=>name.value+\"vue3\"); \/\/ \u4f60\u597d vue3
<\/script><\/code><\/pre>\n\n\n\n
\u65b9\u5f0f\u4e8c<\/h3>\n\n\n\n
<template>
  <h1>this is hello world<\/h1>
  <h2>{{ newName}}<\/h2> 
  <button @click=\"newName='vue3'\">click<\/button>
<\/template>
<script setup lang=\"ts\">
import {computed ,ref} from \"vue\"
const name = ref(\"\u4f60\u597d\");
const newName = computed({
  get(){
    return name.value
  },
  set(value:string){
    name.value = \"hello\"+value \/\/ \u4f60\u597d vue3
  }
})
<\/script><\/code><\/pre>\n\n\n\n
\n\n\n\n
watch \u76d1\u542c<\/h2>\n\n\n\n
\u76d1\u542c\u57fa\u672c\u7c7b\u578b<\/h3>\n\n\n\n
<script setup lang=\"ts\">
import {watch,ref} from \"vue\"
const name = ref(\"zhangsan\")
const age = ref(18)
watch(name,(newValue,oldvalue)=>{})
\/\/\u540c\u65f6\u76d1\u542c\u591a\u4e2a\u53d8\u91cf
watch([name,age],(newVal,oldVal)=>{})
<\/script><\/code><\/pre>\n\n\n\n
\u76d1\u542c\u5bf9\u8c61<\/h3>\n\n\n\n
<template>
  <h1>this is hello world<\/h1>
  <h2>{{ data.name }}<\/h2>
  <button @click=\"handleClick\">click<\/button>
<\/template>
<script setup lang=\"ts\">
import {reactive ,watch} from \"vue\"
const data = reactive({
  name:\"zhangsan\"
})
const handleClick = ()=>{
  data.name = \"lisi\"
}
watch(data,(newValue,oldValue)=>{
  console.log(newValue);
  console.log(oldValue);
})
<\/script><\/code><\/pre>\n\n\n\n
  • \u5982\u679c\u4f7f\u7528 reactive \u76d1\u542c\u5bf9\u8c61\u65e0\u9700\u4f7f\u7528 deep \u6a21\u5f0f<\/li>
  • watch \u76d1\u542c\u5bf9\u8c61 newValue \u548c oldValue \u7684\u503c\u90fd\u662f\u6700\u65b0\u7684<\/li><\/ul>\n\n\n\n
    \u5982\u679c\u76d1\u542c\u4e00\u4e2a\u5bf9\u8c61\u7684\u5177\u4f53\u5c5e\u6027,\u9700\u8981\u4f7f\u7528\u56de\u8c03\u51fd\u6570<\/p><\/blockquote>\n\n\n\n
    <script setup lang=\"ts\">
    import {reactive ,watch} from \"vue\"
    const data = reactive({
      name:\"zhangsan\"
    })
    const handleClick = ()=>{
      data.name = \"lisi\"
    }
    watch(()=>data.name,(newValue,oldValue)=>{})
    <\/script><\/code><\/pre>\n\n\n\n
    \u6df1\u5ea6\u914d\u7f6e<\/h3>\n\n\n\n
    • deep:true \u6df1\u5ea6\u76d1\u542c<\/li>
    • flush:’pre’ \/\/ pre\u66f4\u65b0\u524d\u8c03\u7528 sync \u540c\u6b65\u8c03\u7528 post \u66f4\u65b0\u540e\u8c03\u7528<\/li>
    • immediate:true \/\/ \u7acb\u5373\u6267\u884c<\/li><\/ul>\n\n\n\n
      \n\n\n\n
      watch\u9ad8\u7ea7\u4fa6\u542c\u5668<\/h2>\n\n\n\n
      \u793a\u4f8b<\/h3>\n\n\n\n
      <template>
        <h1>this is hello world<\/h1>
        <h2>{{ name }}<\/h2>
        <button @click=\"handleClick\">click<\/button>
        <button @click=\"handleStop\">\u505c\u6b62\u76d1\u542c<\/button>
      <\/template>
      <script setup lang=\"ts\">
      import {watchEffect,ref} from \"vue\"
      const name = ref(\"zhangsan\")
      const handleClick = ()=>{
        name.value = \"lisi\"
      }
      const handleStop = ()=>{
        stopWatch()
      }
      const stopWatch = watchEffect((oninvalidate)=>{
        oninvalidate(()=>console.log(\"\u66f4\u65b0\u524d\u8c03\u7528\"))
        console.log(name.value);
      })
      <\/script><\/code><\/pre>\n\n\n\n
      \u6df1\u5ea6\u914d\u7f6e [ \u7b2c\u4e8c\u4e2a\u53c2\u6570 ]<\/h3>\n\n\n\n
      <script setup lang=\"ts\">
      import {watchEffect,ref} from \"vue\"
      watchEffect((oninvalidate)=>{
        oninvalidate(()=>console.log(\"\u66f4\u65b0\u524d\u8c03\u7528\"))
        console.log(name.value);
      },{
          flush:'pre' , \/\/ pre\u66f4\u65b0\u524d\u8c03\u7528 sync \u540c\u6b65\u8c03\u7528 post \u66f4\u65b0\u540e\u8c03\u7528
          onTrigger(e){debugger;} \/\/ \u7528\u4e8e\u8c03\u8bd5\u7684 debugger \u63a7\u5236\u53f0
      })
      <\/script><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
      \u8ba1\u7b97\u5c5e\u6027 \u65b9\u5f0f\u4e00 \u65b9\u5f0f\u4e8c watch \u76d1\u542c \u76d1\u542c\u57fa\u672c\u7c7b\u578b \u76d1\u542c\u5bf9\u8c61 \u5982\u679c\u4f7f\u7528 reactive \u76d1\u542c\u5bf9\u8c61\u65e0\u9700\u4f7f […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[64],"tags":[],"class_list":["post-693","post","type-post","status-publish","format-standard","hentry","category-vue3"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/693","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=693"}],"version-history":[{"count":1,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/693\/revisions"}],"predecessor-version":[{"id":694,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/693\/revisions\/694"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=693"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=693"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=693"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}