{"id":687,"date":"2023-05-08T22:01:26","date_gmt":"2023-05-08T14:01:26","guid":{"rendered":"http:\/\/gjweb.top\/?p=687"},"modified":"2023-05-08T22:01:27","modified_gmt":"2023-05-08T14:01:27","slug":"01-ref-%e5%85%a8%e5%ae%b6%e6%a1%b6","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=687","title":{"rendered":"01.ref \u5168\u5bb6\u6876"},"content":{"rendered":"\n

\u57fa\u672c\u7528\u6cd5 ref<\/h2>\n\n\n\n
<template>
    <h1>{{data.name}}<\/h1>
<\/template>
<script setup lang=\"ts\">
import {ref} from \"vue\"
const data = ref({name:'zhangsan'})
data.name.value = \"lisi\"
<\/script><\/code><\/pre>\n\n\n\n
\u4f7f\u7528\u6cdb\u578b<\/h2>\n\n\n\n
<template>
    <h1>{{data.name}}<\/h1>
<\/template>
<script setup lang=\"ts\">
import {ref} from \"vue\"
import type {Ref} from \"vue\"
type Data = {name:string}
var data:Ref<Data> = ref({name:'zhangsan'})
<\/script><\/code><\/pre>\n\n\n\n
\u4f7f\u7528\u590d\u6742\u7684 interface<\/h2>\n\n\n\n
<template>
    <h1>{{data.name}}<\/h1>
<\/template>
<script setup lang=\"ts\">
import {ref} from \"vue\"
import type {Ref} from \"vue\"
interface Data {
  name:string
 }
var data:Ref<Data> = ref({name:'zhangsan'})
<\/script><\/code><\/pre>\n\n\n\n
\u6d45\u5c42\u54cd\u5e94\u5f0f shallowRef<\/h2>\n\n\n\n
\u7528\u6cd5\u540c ref \uff0c shallowRef \u4e0d\u4f1a\u66f4\u65b0\u89c6\u56fe\uff0c\u5373\u4e0d\u4f1a\u8c03\u7528 triggerRef \u800c Ref \u51fd\u6570\u6bcf\u6b21\u53d8\u5316\u90fd\u4f1a\u89e6\u53d1 triggerRef\uff1b<\/p><\/blockquote>\n\n\n\n
<template>
    <h1>{{data.name}}<\/h1>
<\/template>
<script setup lang=\"ts\">
import {shallowRef} from \"vue\"
const data = shallowRef<any>({name:'zhangsan'})
setTimeout(()=>{data.value.name='lisi',3000) \/\/ \u89c6\u56fe\u4e0d\u4f1a\u66f4\u65b0
<\/script><\/code><\/pre>\n\n\n\n
\u5f3a\u5236\u66f4\u65b0 triggerRef<\/h2>\n\n\n\n
<template>
    <h1>{{data.name}}<\/h1>
    <h1>{{data2.name}}<\/h1>
<\/template>
<script setup lang=\"ts\">
import {ref,shallowRef,triggerRef} from \"vue\"
const data = shallowRef<any>({name:'zhangsan'})
setTimeout(()=>{
    data.value.name=\"lilsi\"
    triggerRef(data)
},3000) \/\/ \u89c6\u56fe\u4e0d\u4f1a\u66f4\u65b0
<\/script><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u57fa\u672c\u7528\u6cd5 ref \u4f7f\u7528\u6cdb\u578b \u4f7f\u7528\u590d\u6742\u7684 interface \u6d45\u5c42\u54cd\u5e94\u5f0f shallowRef \u7528\u6cd5\u540c ref  […]<\/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-687","post","type-post","status-publish","format-standard","hentry","category-vue3"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/687","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=687"}],"version-history":[{"count":1,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/687\/revisions"}],"predecessor-version":[{"id":688,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/687\/revisions\/688"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}