文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

详解Vue生命周期和MVVM框架

2024-04-02 19:55

关注

生命周期

组件从开始到结束的全过程

创建阶段:beforeCreate、created挂载阶段:beforeMount、mounted

更新阶段:beforeUpdate、updated

组件从开始到结束的全过程

与动态组件有关的两个特殊的钩子:

activated(激活)、deactivated(休眠)

与组件异常捕获有关的一个钩子:

errorCaptured

生命周期有哪些

const app = new Vue({
      data () {
        return {
          num: 1
        }
      },
      watch: {
        num () {
          console.log('--- num changed')
        }
      },
      // 声明methods方法
      // 声明生命周期钩子
      beforeCreate () {
        console.log('---beforeCreate')
      },
      // 注入provide数据
      // 响应式劫持、把data上数据遍历后放在this上
      created () {
        console.log('---created')
        // 调接口
      },
      // 通过el/$mount/template找视图模板
      // 把template视图模板编译成render() (render方法是用于创建虚拟DOM的)
      beforeMount () {
        console.log('---beforeMount')
      },
      // 创建$el挂载节点
      // 调用render()方法第一次生成虚拟DOM(Vnode是对真实视图结构的一种数据描述)
      // Vue开始编译工作,循环递归,指令和声明式变量进行touch,依赖收集、通知Watcher第一次完成DOM渲染
      mounted () {
        console.log('---mounted')
        // 调接口、开定时器、建立websocket长连接、echarts图表实例化、DOM/BOM操作。。。
      },
      // 网页呈现你的面前上,当各种事件交互触发data变化时
      beforeUpdate () {
        console.log('---beforeUpdate')
      },
      // 再次调用render()方法生成新的虚拟DOM(现在就有了两个虚拟DOM)
      // 执行patch运算(diff运算)找出两个虚拟DOM之间的最小差异(脏节点集合),通过一个队列进行异步更新。
      updated () {
        console.log('---updated')
        // updated在某些场景下,可以模拟出watch/$nextTick()的功能。
      },
      // 当调用$destroy()或路由切换时,即将进入销毁阶段
      beforeDestroy () {
        console.log('---beforeDestroy')
        // 清除定时器、清除缓存
      },
      // 移除当前组件的Watcher(DOM将无法再更新了)
      // 拆卸掉所有的子组件
      // 移除事件监听器(wacth等等)
      destroyed () {
        console.log('---destroyed')
      },
      methods: {
        add () {
          console.log('---add')
          this.num++
        }
      }
    })
    app.$mount('#app')

app.$mount('#app')和el:'#app'都是挂载到真实DOM中。

什么是虚拟DOM

是一个很大的JSON数据,用于描述视图模板的,保存在内存中。

虚拟DOM存在的价值点

更新,把DOM更新粒度降到最低,规避人为DOM滥操作。

什么是diff运算

在更新阶段,patch对新旧虚拟DOM进行对比,找出脏节点,提交更新。

什么是MVVM框架

MVVM流程 : M数据层 -> VM虚拟DOM层 -> V视图层

网页本质 = M数据层 + V视图结构

到此这篇关于Vue生命周期和MVVM框架的文章就介绍到这了,更多相关Vue生命周期和MVVM框架内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯