Vue3.0学习笔记-vm和生命周期函数

最新推荐文章于 2024-09-22 13:43:17 发布
最新推荐文章于 2024-09-22 13:43:17 发布
阅读量1k 收藏 1
点赞数
分类专栏： vue 文章标签： vue javascript vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/petit_wu/article/details/114298480
版权
本文探讨Vue3.0中的vm（ViewModel）及其生命周期变化。介绍了从beforeCreate到unmounted的八大生命周期函数，并指出在Vue3.0中，这些函数已更新为setup(), onBeforeMount等新的调用方式。" 107627622,8765248,SQL数据库对象搜索方法大全,"['数据库', 'SQL Server Management Studio', '搜索工具']
摘要由CSDN通过智能技术生成

vm和生命周期函数

createApp({})

mount()

根组件vm -- proxy形式的对象

mvvm模式 vm -- viewModel

生命周期函数 -- 在某个特定时刻自动执行的函数

有八个生命周期函数，

  • beforeCreate( ) ：在实例生成之前会自动执行的函数
  • created( ) : 在实例生成之后会自动执行的函数
  • beforeMount( ) : 在模板渲染完成之前执行的函数
  • mounted( ) : 在模板渲染完成之后执行的函数
  • beforeUpdate ：当data中的数据变化时， 会立即自动执行的函数
  • updated：当data中的数据发生变化，页面重新渲染完后，会自动执行的函数
  • beforeUnmount( ) :当Vue应用失效时，会自动执行的函数
  • unmounted() : 当Vue应用失效时，且DOM完全销毁之后，会自动执行

但在vue3中，会使用新的函数调用方式

  • beforeCreate -> 请使用 setup()
  • created -> 请使用 setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -&
最低0.47元/天 解锁文章
petit_wu
关注
专栏目录
vue3.0 生命周期简介
weixin_44019816的博客
10-29 2853
setup() 替代 beforecreate -> use setup() created -> use setup() 前面加on beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onbeforeUpdate updated -> onUpdated activated -> onActivated deactivated -> onDeactivated e...
Vue2-Vue3.0学习笔记（2021年黑马程序员最新视频）
m0_67402588的博客
03-09 1999
Vue 介绍 什么是 vue ？ 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！ 要学习 vue，就是在学习 vue 框架中规定的用法！ vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库 只有把上面老师罗列的内容掌握以后，才有开发 vue 项目的能力！ vue 的两个特性 数据驱动视图： 数据的变化会驱动视图自动更新 好处：程序员只管把数据维护好，那么页面
vue3.0——生命周期
kk2442687723的博客
09-23 5267
在组件化的框架中，比如Angular、React或Vue，都为组件定义了生命周期这个概念，每个组件实例在被创建时都要经过一系列的初始化过程，例如：需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时，在这个过程中也会运行一些叫做生命周期钩子的函数，它们提供给用户在组件的不同阶段添加自己的代码的机会。 使用过Vue2.x的朋友肯定对它的生命周期钩子很熟悉了，因为在实际的开发过程中我们多多少少会用到他们，比如 created、mounted、destoryed等等。而在Vue3
vue3 生命周期函数
最新发布
sunshine_cui的博客
09-22 565
状态跟踪，vue3新引入的钩子函数，只有在开发环境有用，用于跟踪所有响应式变量和方法，一旦页面有update，就会跟踪他们并返回一个event对象。在开发环境有效，与onRenderTracked的效果类似，但不会跟踪所有的响应式变量方法，只会定点追踪发生改变的数据，同样返回一个event对象。1.1 setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method。，数据更新后调用，此时内存数据已经修改，页面数据也已经更新。
Vue 3.0 的生命周期
weixin_30478923的博客
06-28 409
new Vue() new一个vue实例化对象 init Event & Lifecycle 执行一些初始化和生命周期相关的操作 beforeCreate 组件实例刚刚被创建出来 执行一些初始化和生命周期相关的操作 init injections & reactivity 初始化注入和校验 created data数据属性已经绑定，放在data中的属性当值发生改变的同时，视图也会...
VUE3.0生命周期函数
shi15926lei的博客
12-09 510
vue3生命周期
Vue3生命周期函数
最是人间留不住，朱颜辞镜花辞树。
11-16 2225
onRenderTracked直译过来就是状态跟踪，它会跟踪页面上所有响应式变量和方法的状态，也就是我们用return返回去的值，它都会跟踪。只要页面有update的情况，它就会跟踪，然后生成一个event对象，我们通过event对象来查找程序的问题所在。Vue3的setup语法糖直接代替beforeCreate，Created；Destroy更名为Unmount；onRenderTriggered直译过来是状态触发，它不会跟踪每一个值，而是给你变化值的信息。
尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记 （一）
weixin_44566194的博客
12-08 3187
本文为总结尚硅谷Vue2.0+Vue3.0 的学习笔记系列的第一章——Vue的核心，包含Vue简介、模板语法、数据绑定、MVVM模型、事件处理，计算属性与监视、class与style绑定、列表渲染、过滤器、内置指定和自定义指令以及Vue生命周期等知识点
尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记 （三）
weixin_44566194的博客
12-24 934
本文整理了B站尚硅谷Vue2.0 + Vue3.0 入门到精通教程视频第三章 Vue脚手架的学习内容笔记，包含初始化脚手架、ref与props属性、混入、插件、自定义事件、全局事件总线、消息订阅与发布、过渡与动画以及TodoList案例实操等内容。
【Vue】Vue2.0+Vue3.0学习笔记day13（Vue3）
weixin_58214412的博客
01-18 889
目录 136.vue3简介 137.使用vue-cli创建工程 138.使用vite创建工程 139.分析工程 140.安装开发者工具 141.初识setup 142.ref函数_处理基本类型 143.ref函数_处理对象类型 144.reactive函数 145.回顾vue2的响应式原理 146.vue3响应式原理_Proxy 147.vue3响应式原理_Reflect 136.vue3简介 137.使用vue-cli创建工程 ## 查看@vue/c..
vue3.0---生命周期函数的使用
lonsole的博客
09-15 387
//1、新版的生命周期函数，可以按需导入到组件中，且只能在setip()函数中使用 import { onMounted,onUpdated,onUnmounted } from 'vue' //在setup()函数中调用computed()函数 setup(){ onMounted(() => { console.log('mounted') }) onUpdated(() => { console.log('updated') }) onUnmounted(() =&gt
vue3.0生命周期的示例代码
01-18
在组件化的框架中，比如Angular、React或Vue，都为组件定义了生命周期这个概念，每个组件实例在被创建时都要经过一系列的初始化过程，例如：需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时，在这个过程中也会运行一些叫做生命周期钩子的函数，它们提供给用户在组件的不同阶段添加自己的代码的机会。 使用过Vue2.x的朋友肯定对它的生命周期钩子很熟悉了，因为在实际的开发过程中我们多多少少会用到他们，比如 created、mounted、destoryed等等。而在Vue3.0中，Vue2.x Options API形式的生命周期钩子函数和新的Composit
Vue vm.$attrs使用场景详解
10-15
主要介绍了vm.$attrs使用场景详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue3 中生命周期的使用
weixin_62897746的博客
02-21 7003
组件从创建到销毁的整个过程，不同阶段执行不同的函数 每个 `Vue` 组件实例在创建时都需要经历一系列的初始化步骤，比如数据侦听，编译模板，挂载实例到 `DOM`，以及在数据改变时更新 `DOM`。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。最常用的是`created`、`mounted`、`updated` 和 `unmounted`。
vue3.0 生命周期
cjy_fly的博客
06-07 525
vue3.0 生命周期
vue3.0的生命周期
weixin_39273589的博客
08-04 486
总之，Vue 3.0中的生命周期钩子函数包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted和errorCaptured，它们提供了在不同阶段执行代码的机会，可以用于进行数据初始化、DOM操作和清理等任务。在Vue 3.0中，由于引入了Composition API，提供了更灵活的组合函数，因此传统的生命周期钩子函数的使用方式可能会有一些变化。
vue3.0 配置属性与生命周期函数
weixin_47409897的博客
04-01 671
目录vue3.0 的配置属性 与 生命周期函数vue3.0 的配置属性计算属性 computed监听属性 watchEffect 与 watchwatchEffectwatch生命周期函数setup 组合 apionMounted 挂载后onUnmounted 卸载函数XXX vue3.0 的配置属性 与 生命周期函数 vue3.0 的配置属性 计算属性 computed 作用：对于数据的的操作的东西，可以放在计算属性之中，具有缓存效果 <template> <div>
vue脚手架3详细配置，爆肝两天，你可以不用，但是不能不会_$vm vue3
2401_84616922的博客
05-16 453
大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分。锁文件【项目使用的版本】后期别人访问的时候，直接加载锁里面的版本信息；是 自定义配置，需要我们手动配置，也可以自己选择需要配置的。最新的特性都会在这个上面先实现。而且Sass/Scss。，会问你用哪个版本的脚手架，这里我选择的是。假如需要延迟挂载，可以在之后手。代码，从而在现有环境执行。需要保存后才会生效。
【解决方案】【最佳实践】vue3.0生命周期、组合式API（示例代码+详细讲解+中文图解）
一起寻找DX3906-探索未知
05-13 1055
vue3.0生命周期、运行机制、组合式API、setup、onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted
vue3.0中keep- alive生命周期使用
05-17
在 Vue 3.0 中，`keep-alive` 组件的生命周期钩子函数与 Vue 2.x 版本基本一致，但是由于 Vue 3.0 中对于组件实例的创建和销毁方式进行了优化，因此需要注意一些细节。 `keep-alive` 组件的生命周期包括 `activated` 和 `deactivated` 两个钩子函数。当 `keep-alive` 组件中的子组件被激活时，`activated` 钩子函数会被调用；当 `keep-alive` 组件中的子组件被停用时，`deactivated` 钩子函数会被调用。 下面是一个示例： ```html <template> <div> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div> </template> <script> export default { activated() { console.log('activated') }, deactivated() { console.log('deactivated') } } </script> ``` 在这个示例中，我们使用了 `keep-alive` 组件来缓存某些路由页面。其中，`activated` 和 `deactivated` 钩子函数用于在缓存的页面被激活或停用时进行相应的操作，例如发送网络请求、更新数据等。 需要注意的是，由于 Vue 3.0 中对于组件实例的创建和销毁方式进行了优化，因此 `keep-alive` 组件中的子组件在被缓存时，并不会被销毁。因此，`keep-alive` 组件中的子组件不会触发 `created` 和 `beforeDestroy` 钩子函数，而是只会触发 `activated` 和 `deactivated` 钩子函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值