草庐IT

Vue生命周期和MVVM框架

沐沐 2023-03-28 原文

生命周期

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

  • 创建阶段:beforeCreate、created
  • 挂载阶段:beforeMount、mounted
  • 更新阶段:beforeUpdate、updated

  • 销毁阶段:beforeDestroy、destroyed

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

activated(激活)、deactivated(休眠)

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

errorCaptured

生命周期有哪些

  • beforeCreate:声明methods方法,声明生命周期钩子
  • created:注入provide数据,响应式劫持、把data上数据遍历后放在this上
  • beforeMount:通过el/$mount/template找视图模板,把template视图模板编译成render() (render方法是用于创建虚拟DOM的)
  • mounted:创建$el挂载节点,调用render()方法第一次生成虚拟DOM(Vnode是对真实视图结构的一种数据描述),Vue开始编译工作,循环递归,指令和声明式变量进行touch,依赖收集、通知Watcher第一次完成DOM渲染
  • beforeUpdate:网页呈现在你的面前上,当各种事件交互触发data变化时
  • updated:再次调用render()方法生成新的虚拟DOM(现在就有了两个虚拟DOM,执行patch运算(diff运算)找出两个虚拟DOM之间的最小差异(脏节点集合),通过一个队列进行异步更新。
  • beforeDestroy:当调用$destroy()或路由切换时,即将进入销毁阶段
  • destroyed:移除当前组件的Watcher(DOM将无法再更新了),拆卸掉所有的子组件,移除事件监听器(wacth等等)
    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框架的更多相关文章

  1. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  2. TimeSformer:抛弃CNN的Transformer视频理解框架 - 2

    Transformers开始在视频识别领域的“猪突猛进”,各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解,本篇主要介绍了FBAI团队的TimeSformer,这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用,就请点赞、收藏、关注!paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

  3. ruby - sinatra 框架的 MVC 模式 - 2

    我想开始使用“Sinatra”框架进行编码,但我找不到该框架的“MVC”模式。是“MVC-Sinatra”模式或框架吗? 最佳答案 您可能想查看Padrino这是一个围绕Sinatra构建的框架,可为您的项目提供更“类似Rails”的感觉,但没有那么多隐藏的魔法。这是使用Sinatra可以做什么的一个很好的例子。虽然如果您需要开始使用这很好,但我个人建议您将它用作学习工具,以对您来说最有意义的方式使用Sinatra构建您自己的应用程序。写一些测试/期望,写一些代码,通过测试-重复:)至于ORM,你还应该结帐Sequel其中(imho

  4. (附源码)vue3.0+.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图:一.整体介绍  介绍SignalR一种通讯模型Hub(中心模型,或者叫集线器模型),调用这个模型写好的方法,去发送消息。  内容有:    ①:Hub模型的方法介绍    ②:服务器端代码介绍    ③:前端vue3安装并调用后端方法    ④:聊天室样例整体流程:1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过,signalR内置方法.invoke()  去请求接口3、监听接受方法(渲染消息)通过new signalR.HubConnectionBuilder().on

  5. ruby-on-rails - 正确了解 Rails 框架的最佳方式是什么? - 2

    按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭10年前。我一直在Rails上做两个项目,它们运行良好,但在这个过程中重新发明了轮子,自来水(和热水)和止痛药,正如我随后了解到的那样,这些已经存在于框架中。那么基本上,正确了解框架中所有智能部分的最佳方法是什么,这将节省时间而不是自己构建已经实现的功能?从第1页开始阅读文档?是否有公开所有内容的特定示例应用程序?一个特定的开源项目?所有的rails交通?还是完全

  6. ruby - 自动将院子文档框架添加到现有的 Rails 遗留代码中 - 2

    关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。关闭4年前。Improvethisquestion我希望能够将模板化的YARD文档样式注释插入到我现有的Rails遗留应用程序中。目前它的评论很少。我想要具有指定参数的类header和方法header(通过从我假定的方法签名中提取)和返回值的占位符。在PHP代码中,我有一些工具可以检查代码并在适当的位置创建插入到代码中的文档header注释。在带有Ducktyping等的Ruby中,我确信诸如@params等类型之类

  7. ruby-on-rails - 具有六边形架构和 DCI 模式的框架和数据库适配器 - 2

    我尝试用Ruby设计一个基于Web的应用程序。我开发了一个简单的核心应用程序,在没有框架和数据库的情况下在六边形架构中实现DCI范例。核心六边形中有小六边形和网络,数据库,日志等适配器。每个六边形都在没有数据库和框架的情况下自行运行。在这种方法中,我如何提供与数据库模型和实体类的关系作为独立于数据库的关系。我想在将来将框架从Rails更改为Sinatra或数据库。事实上,我如何在这个核心Hexagon中实现完全隔离的rails和mongodb的数据库适配器或框架适配器。有什么想法吗? 最佳答案 ROM呢?(Ruby对象映射器)。还有

  8. python - Ruby 是否有相当于 Python 的扭曲框架作为网络抽象层? - 2

    据我了解,Python的扭曲框架为网络通信提供了更高级别的抽象(?)。我正在寻找在Rails应用程序中使用与twisted等效的Ruby。 最佳答案 看看EventMachine.它不像Twisted那样广泛,但它是围绕事件驱动网络编程的相同概念构建的。 关于python-Ruby是否有相当于Python的扭曲框架作为网络抽象层?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/9

  9. vue 实现内容超出两行显示展开更多功能,可依据需求自定义任意行数! - 2

    平时开发中我们经常会遇到这样的需求,在一个不限高度的盒子中会有很多内容,如果全部显示用户体验会非常不好,所以可以先折叠起来,当内容达到一定高度时,显示展开更多按钮,点击即可显示全部内容,先来看看效果图: 这样做用户体验瞬间得到提升,接下来看看具体细节。0">主要操作在内容这里{{item.username}},……展开更多样式大家可依据自己项目需求进行设计,这里就不贴了,主要说几个关键的。1、在data中定义三个属性isShowMore:false, //控制展开更多的显示与隐藏textHeight:null, //框中内容的高度status:false, //内容状态是否打开2.计算内容是否

  10. ruby-on-rails - 使用 Rails 以外的 Ruby 框架是否有任何潜在的缺点? - 2

    我想使用比Rails(Sinatra/Ramaze/Camping)更轻的框架,但我担心这样做我将无法使用许多以插件形式为Rails定制的共享库.这是一个主要问题,还是这些插件中的大多数都可以跨不同的Ruby框架使用?使用Ruby框架而不是Rails是否还有其他潜在的缺点? 最佳答案 您仍然可以使用gems在你提到的所有框架中,很多东西都是可重用的。想要交换一个新的ORM,没问题。想要一个花哨的shmacy语法高亮,没问题。Rails一直在大力插入摆脱旧的插件模型,转而使用gems。如果其他框架之一符合您的需求,最好使用它。请记住,

随机推荐