• vue知识点整理


    1、Vue的生命周期

    beforeCreate(创建前) 在数据观测和初始化事件还未开始
    created(创建后) 完成数据观测,属性和方法的运算,初始化事件,$el属性还没有显示出来
    beforeMount(载入前) 在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
    mounted(载入后) 在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
    beforeUpdate(更新前) 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
    updated(更新后) 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
    beforeDestroy(销毁前) 在实例销毁之前调用。实例仍然完全可用。
    destroyed(销毁后) 在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
    1.什么是vue生命周期?
    答: Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。

    2.vue生命周期的作用是什么?
    答:它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

    3.vue生命周期总共有几个阶段?
    答:它可以总共分为8个阶段:创建前/后, 载入前/后,更新前/后,销毁前/销毁后。

    4.第一次页面加载会触发哪几个钩子?
    答:会触发 下面这几个beforeCreate, created, beforeMount, mounted 。

    5.DOM 渲染在 哪个周期中就已经完成?
    答:DOM 渲染在 mounted 中就已经完成了。

    2、Vue与Angular以及React的区别?

    1、与AngularJS的区别

    相同点:都支持指令:内置指令和自定义指令;都支持过滤器:内置过滤器和自定义过滤器;都支持双向数据绑定;都不支持低端浏览器。

    不同点:AngularJS的学习成本高,比如增加了Dependency Injection特性,而Vue.js本身提供的API都比较简单、直观;在性能上,AngularJS依赖对数据做脏检查,所以Watcher越多越慢;Vue.js使用基于依赖追踪的观察并且使用异步队列更新,所有的数据都是独立触发的。

    2、与React的区别

    相同点:React采用特殊的JSX语法,Vue.js在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用;中心思想相同:一切都是组件,组件实例之间可以嵌套;都提供合理的钩子函数,可以让开发者定制化地去处理需求;都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载;在组件开发中都支持mixins的特性。

    不同点:React采用的Virtual DOM会对渲染出来的结果做脏检查;Vue.js在模板中提供了指令,过滤器等,可以非常方便,快捷地操作Virtual DOM。

     

    3、Vue.js是一个提供MVVM数据双向绑定的库,专注于UI层面,核心思想是:数据驱动、组件系统

    数据驱动:

    Vue.js数据观测原理在技术实现上,利用的是ES5Object.defineProperty和存储器属性: getter和setter(所以只兼容IE9及以上版本),可称为基于依赖收集的观测机制。核心是VM,即ViewModel,保证数据和视图的一致性。

    watcher:每一个指令都会有一个对应的用来观测数据的对象,叫做watcher,比如v-text="msg", {{ msg }},即为两个watcher,watcher对象中包含了待渲染的关联DOM元素。

    <div id="app">

      {{ message }}

    </div>

    var app = new Vue({

      el: '#app',

      data: {

        message: 'Hello Vue!'

      }

    })

    基于依赖收集的观测机制原理:

    1 将原生的数据改造成 “可观察对象”,通常为,调用defineProperty改变data对象中数据为存储器属性。一个可观察对象可以被取值getter,也可以被赋值setter。

    2 在解析模板,也就是在watcher的求值过程中,每一个被取值的可观察对象都会将当前的watcher注册为自己的一个订阅者,并成为当前watcher的一个依赖。

    3 当一个被依赖的可观察对象被赋值时,它会通知notify所有订阅自己的watcher重新求值,并触发相应的更新,即watcher对象中关联的DOM改变渲染。

    依赖收集的优点在于可以精确、主动地追踪数据的变化,不需要手动触发或对作用域中所有watcher都求值(angular脏检查实现方式的缺点)。特殊的是,对于数组,需要通过包裹数组的可变方法(比如push)来监听数组的变化。在添加/删除属性,或是修改数组特定位置元素时,也需要调用特定的函数,如obj.$add(key, value)才能触发更新。这是受ES5的语言特性所限。

    组件系统:

    应用类UI可以看作全部是由组件树构成的。

    注册一个组件:

    Vue.component('my-component', {

        // 模板

        template: '<div>{{msg}} {{privateMsg}}</div>',

        // 接受参数

        props: {

            msg: String   

        },

        // 私有数据,需要在函数中返回以避免多个实例共享一个对象

        data: function () {

            return {

                privateMsg: 'component!'

            }

        }

    })

    <my-component msg="hello"></my-component>

    组件的核心选项

    1 模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系。

    2 初始数据(data):一个组件的初始数据状态。对于可复用的组件来说,这通常是私有的状态。

    3 接受的外部参数(props):组件之间通过参数来进行数据的传递和共享。

    4 方法(methods):对数据的改动操作一般都在组件的方法内进行。

    5 生命周期钩子函数(lifecycle hooks):一个组件会触发多个生命周期钩子函数,最新2.0版本对于生命周期函数名称改动很大。

    6 私有资源(assets):Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。

    Webpack是一个开源的前端模块构建工具,它提供了强大的loader API来定义对不同文件格式的预处理逻辑,这是.vue后缀单文件组件形式的基础。所以在此基础上,尤大开发的vue-loader允许将模板、样式、逻辑三要素整合在同一个文件中,以.vue文件后缀形成单文件组件格式,方便项目架构和开发引用。

    其他特性:

    1 异步批量DOM更新:当大量数据变动时,所有受到影响的watcher会被推送到一个队列中,并且每个watcher只会推进队列一次。这个队列会在进程的下一个 tick异步执行。这个机制可以避免同一个数据多次变动产生的多余DOM操作,也可以保证所有的DOM写操作在一起执行,避免DOM读写切换可能导致的layout。

    2 动画系统:Vue.js提供了简单却强大的动画系统,当一个元素的可见性变化时,用户不仅可以很简单地定义对应的CSS Transition或Animation效果,还可以利用丰富的JavaScript钩子函数进行更底层的动画处理。3 可扩展性:除了自定义指令、过滤器和组件,Vue.js还提供了灵活的mixin机制,让用户可以在多个组件中复用共同的特性。

     

  • 相关阅读:
    无线路由器wds桥接技术+丢包率
    2016CCPC东北地区大学生程序设计竞赛1008/HDU 5929 模拟
    Codeforces Round #375 (Div. 2) A B C 水 模拟 贪心
    Intel Code Challenge Elimination Round (Div.1 + Div.2, combined) A B C D 水 模拟 并查集 优先队列
    Codeforces Round #310 (Div. 2) A B C
    Codeforces Round #374 (Div. 2) A B C D 水 模拟 dp+dfs 优先队列
    Codeforces Round #313 (Div. 2) A B C 思路 枚举 数学
    Codeforces Round #373 (Div. 2) A B C 水 贪心 模拟(四舍五入进位)
    CentOS7 PostgreSQL 安装
    数据库事务的隔离级别
  • 原文地址:https://www.cnblogs.com/pinuocao/p/12502363.html
Copyright © 2020-2023  润新知