• vue学习(一)


    一:Vue是什么?

      Vue是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用,Vue的核心是只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

    二、渐进式框架含义?

          主张最少。

        每个框架都会不可避免有一些自己的特点,从而对使用者有一定的要求。这些要求就是主张,主张有强有弱,它的强势程度影响了在业务开发中的使用方式。

      比如Angular:它的两个版本都是强主张,如果你只用这个框架,就必须接受以下东西:必须使用它的模块机制、依赖注入、特殊形式定义组件(这个是每个视图框架都有的,难以避免),so Angular是带有比较强的排它性,如果你的应用不是从头开始,而要不断考虑是否和其他东西集成,这些主张会带来一定的困扰

      比如React:它有一定程度的主张,主要是函数式编程的理念。比如说你要知道什么是副作用,什么是纯函数,如何隔离副作用。它的侵入性看似没有Angular那么强,主要因为是它是软性侵入。

      而vue:它是渐进的,没有强主张,可以在原有的大系统上面,把一两个组件改用它来说实现,当jQuery用,也可以整个用它全家桶开发,当Angular用;还可以用它的视图,搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念,也可以函数式,都可以,它只是个轻量视图而已,只做了自己该做的事,没有做不该做的事,仅此而已。

      渐进也可以理解为 提供足够的选择,并且没有很多强制性的要求。使用Vue的时候,并不需要把整个框架的所有东西都用上,可以根据实际情况选择你需要的部分;

      如下图所示,vue的体系从内到外依次是声明式渲染(Declarative Rendering)、组件系统(Component System)、客户端路由(Client-side Routing)、大规模状态管理(Large Scale State Management)、构建系统(Build System)。,声明式渲染和组建系统是Vue的核心库所包含内容,而客户端路由、状态管理、构建工具都有专门解决方案。这些解决方案相互独立,你可以在核心的基础上任意选用其他的部件,不一定要全部整合在一起。

    三、自底向上逐层应用?

      由基层开始做起,把基础的东西写好,再逐层往上添加效果和功能。

    四、Vue的两个核心

      数据驱动和组件化

    五、vue生命周期钩子函数有哪些

    beforeCreate,Created( 创建前,后 ),beforeMounted、Mounted(挂载前后),beforeUpdate、Updated(更新前、后),beforeDestory,Destoryed(销毁前、后)

     1、beforeCreate:是在在Vue实例初始化之后触发的第一个钩子,在当前阶段,el 和 data 并未初始化,因此无法访问methods, data, computed等上的方法和数据。

    beforeCreate(){
    
      console.log(this)=>vue实例对象初始化完成
    
      console.log(this.msg)=>访问data中的数据为undefined
    
      console.log(this.getMsg) => 访问methods的方法为undefined
    
    }

    2、Created:实例创建完成之后被调用,当前阶段已完成数据观测,也就是可以使用数据,更改数据,在这里更改数据不会触发updated函数。可以做一些初始数据的获取,在当前阶段无法与dom进行交互,如果非要想,可以通过vm.$nextTick来访问dom(完成了属性和方法的运算,watch/event事件回调,完成了data 数据的初始化,el没有)

     3、beforeMount: 相关的render函数首次被调用(虚拟DOM),实例已完成以下的配置: 编译模板,把data里面的数据和模板生成html,完成了el和data 初始化,注意此时还没有挂载html到页面上。

     在这一阶段发生的事情还是比较多的。 首先会判断对象是否有el选项。如果有的话就继续向下编译,如果没有el选项,则停止编译,也就意味着停止了生命周期,直到在该vue实例上调用vm.$mount(el)

     然后,我们往下看,template参数选项的有无对生命周期的影响。

      (1)如果vue实例对象中有template参数选项,则将其作为模板编译成render函数。

    (2)如果没有template选项,则将外部HTML作为模板编译。

    (3)可以看到template中的模板优先级要高于outer HTML的优先级。

    在vue对象中还有一个render函数,它是以createElement作为参数,然后做渲染操作,而且我们可以直接嵌入JSX,

    so =>render函数选项 > template选项 > outer HTML.

    new Vue({
    
       el: '#app',
    
       render: function(createElement) {
    
        return createElement('h1','this is createElement')
    
      }
    
    })

    4、Mounted:也就是模板中的HTML渲染到HTML页面中。真实dom挂载完毕,数据完成双向绑定,可以访问到动漫节点,使用$refs属性对动漫进行操作

    在mounted之前h1中还是通过{{message}}进行占位的,因为此时还有挂在到页面上,还是JavaScript中的虚拟DOM形式存在的。在mounted之后可以看到h1中的内容发生了变化。

    5、beforeUpdate()

    数据更新时调用,发生在虚拟 DOM 重新渲染之前。 你可以在这个钩子中进一步地更改数据,不会造成重渲染。

    6、updated()

    发生在更新完成之后,当前阶段组件dom一完成更新,你应该避免在此期间更改数据,因为这可能会导致无限循环的更新。

    该钩子在服务器端渲染期间不被调用。

    7、beforeDestroy()

    实例销毁之前调用。在这一步,实例仍然完全可用。可以在这是进行善后的守卫工作,比如清除计时器

    8、destroyed()

    Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

    注意:除了beforeCreate和created钩子之外,其他钩子均在服务器渲染期间不被调用

    源码:

    function initLifecycle (vm) {
    //这个函数主要是有父实例的情况下处理vm.$parent和vm.$children这俩个实例属性.其他的就是新增了一些实例属性
      var options = vm.$options;
      // locate first non-abstract parent
      var parent = options.parent;
      if (parent && !options.abstract) {
        while (parent.$options.abstract && parent.$parent) {
          parent = parent.$parent;
        }
        parent.$children.push(vm);
      }
    
      vm.$parent = parent;
      vm.$root = parent ? parent.$root : vm;
    
      vm.$children = [];
      vm.$refs = {};
    
      vm._watcher = null;
      vm._inactive = null;
      vm._directInactive = false;
      vm._isMounted = false;
      vm._isDestroyed = false;
      vm._isBeingDestroyed = false;
    }
    function initEvents (vm) {
      vm._events = Object.create(null);
      vm._hasHookEvent = false;
      // init parent attached events
      var listeners = vm.$options._parentListeners;
      if (listeners) {
        updateComponentListeners(vm, listeners);
      }
    }

     六、vue 的双向绑定的原理是什么

     vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。具体实现过程:

        我们已经知道实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性发上变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着,我们还需要有一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令对应初始化成一个订阅者Watcher,并替换模板数据或者绑定相应的函数,此时当订阅者Watcher接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。因此接下去我们执行以下3个步骤,实现数据的双向绑定:

    1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。

    2.实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。

    3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。

    流程图如下:

     数据劫持:在Vue中其实就是通过Object.defineProperty来劫持对象属性的setter和getter操作,并“种下”一个监听器,当数据发生变化的时候发出通知。

    参考:https://blog.csdn.net/weixin_33757609/article/details/92719453

     七、MVVM

    MVVM是 Model-View-ViewModel缩写,也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型,View代表视图(UI组件),View是Model是view和model的桥梁,数据会绑定到ViewModel层并自动将数据渲染到页面中,视图变化的时候也会通知viewmodel层更新数据

  • 相关阅读:
    Oracle 数据库简介
    Qt 中事件与处理
    npm常用命令总结
    自适应宽度布局
    原生js发送ajax请求
    微信调试本地环境代码
    多行文本溢出显示省略号
    清除浮动
    用JQuery动态为选中元素添加/删除类
    input中加入搜索图标
  • 原文地址:https://www.cnblogs.com/freefy/p/13621363.html
Copyright © 2020-2023  润新知