【Vue3 从入门到实战 进阶式掌握完整知识体系】002-Vue语法基础:Vue中的应用和组件的基本部分解析、生命周期

二、Vue语法基础

1、Vue中的应用和组件的基本部分

代码





  
  
  
  基础语法
  
  



  

运行结果

image-20210612112626889.png

2、理解Vue的生命周期函数*

生命周期图

图片来自官方文档,注释是本人参考网上解读和英文含义写的,不是特别专业,仅作参考!

lifecycle.png

代码





  
  
  
  基础语法
  
  



  

运行结果

image-20210612132524993.png

关于模板

参考生命周期图解的7和8,如果有模板就去编译,没有就将所绑定的标签作为模板,因此可以这样写!





  
  
  
  基础语法
  
  



  
{{message}}

Vue3的生命周期函数图

de01e730e563406cbf3399861fa23aa4tplv-k3u1fbpfcp-zoom-1.png

Vue3全部的生命周期钩子与Vue2比较

我们可以看到beforeCreatecreatedsetup替换了(但是 Vue3 中仍然可以使用, 因为 Vue3 是向下兼容的, 也就是实际使用的是 vue2 的)。其次,钩子命名都增加了on; Vue3.x 还新增用于调试的钩子函数onRenderTriggeredonRenderTricked

3eadd1ec0ac94343951ae2453cf41fcetplv-k3u1fbpfcp-zoom-1.png

你可能感兴趣的:(【Vue3 从入门到实战 进阶式掌握完整知识体系】002-Vue语法基础:Vue中的应用和组件的基本部分解析、生命周期)