Vue之updata方法

        Vue 的 _update 是实例的一个私有方法,它有 2 个被调用,一个是首次渲染,一个是数据更新的时候渲染;

  • _update 方法的作用是把 VNode 渲染成真实的 DOM;

     

            可以看到,甚至在 web 平台上,是否是服务端渲染也会对这个方法产生影响。因为在服务端渲染中,没有真实的浏览器 DOM 环境,所以不需要把 VNode 最终转换成 DOM,因此是一个空函数,而在浏览器端渲染中,它指向了 patch 方法,它的定义在 src/platforms/web/runtim/patch.js中

    •  

              再回到 patch 方法,首次渲染我们调用了 createElm 方法,这里传入的 parentElm 是 oldVno

Vue 中,@update 并非 Vue 的核心 API,而是一种约定俗成的命名方式,用于监听自定义组件或某些 Vue 原生组件(如 <input> 或自定义组件)的更新事件,处理组件内部状态更新时触发的事件 [^1]。 ### Vue 2.x 中 @update 的使用 在 Vue 2.x 里,修改父组件数据的 .sync 到 Vue 3.x 被替换为 @update。在父组件中,可使用 @update 进行数据修改。示例如下: ```vue <template> <ChildComponent :title="pageTitle" @update:title="pageTitle = $event" /> </template> <script lang="ts" setup> import { ref } from 'vue'; import ChildComponent from './components/ChildComponent.vue'; const pageTitle = ref<string>(); </script> ``` 这里父组件通过 `@update:title` 监听子组件 `title` 属性的更新事件,当子组件触发该事件时,父组件的 `pageTitle` 值会更新 [^4]。 ### Vue 3 中 @update 的使用 #### 普通使用方式 在 Vue 3 中,子组件可通过 update 事件修改父组件绑定的属性值,如 `@update:model-value`。在处理该事件时,可直接使用返回值。示例如下: ```typescript const updateCode = (val: string) => { // val现在确实是字符串 code.value = val; }; ``` 在 Vue-CodeMirror6 的 1.2.5 版本中,`@update:model-value` 事件会正确返回字符串值,与 Vue 的双向绑定机制保持一致 [^2][^3]。 #### options API 方式 在 Vue 3 的 options API 方式中,`@update` 或 `v-model` 可用于父子通讯。示例如下: ```vue <template> <!-- 以下写法是 <Chidren :title="pageTitles" @update:title="pageTitles = $event" /> 的简写 --> <Chidren v-model:title="pageTitles" /> </template> <script> import Chidren from './children1.vue'; export default { data() { return { pageTitles: "I'm title" }; }, components: { Chidren } }; </script> ``` 这里 `v-model:title` 是 `:title` 和 `@update:title` 的简写形式 [^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值