zoukankan      html  css  js  c++  java
  • vue生命周期

    一、MVVM模式

      MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。

      Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷。

    二、vue生命周期的钩子函数

      beforeCreate----创建前:组件实例被创建时,组件属性计算之前,数据对象data都为undefined,未初始化。

      created----创建后:组件实例创建完成,属性已经绑定,数据对象data已存在,但dom未生成,$el未存在。

      beforeMount---挂载前:vue实例的$el和data都已初始化,挂载之前为虚拟的dom节点,data.message未替换。

      mounted-----挂载后:vue实例挂载完成,data.message成功渲染。

      beforeUpdate----更新前:当data变化时,会触发beforeUpdate方法。

      updated----更新后:当data变化时,会触发updated方法。

      beforeDestory---销毁前:组件销毁之前调用。

      destoryed---销毁后: 组件销毁之后调用,对data的改变不会再触发周期函数,vue实例已解除事件监听和dom绑定,但dom结构依然存在。

          通过这些钩子函数可以在vue生命周期中更好的去操作数据。

  • 相关阅读:
    设置好ftp后用xftp连接提示无法打开,无法显示远程文件夹
    textarea如何实现高度自适应?
    thinkphp中__construct与_initialize()的区别
    (转)在mac上配置cocos2d-x开发环境
    dynamic_cast,const_cast,static_cast,reinterpret_cast 详解
    cocos2d-x 2.1.2 bug发现
    cocos2d-x 小技巧
    CCScrollView 实现帮助界面、关卡选择
    cocos2d_x iconv转码
    cocos2dx场景切换中init、onEnter、onEnterTransitionDidFinish的调用顺序
  • 原文地址:https://www.cnblogs.com/Godfather-twq/p/12091729.html
Copyright © 2011-2022 走看看