Vue学习(一)之概览


参考

Vue是什么

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

一句话来说,Vue是用来构建用户界面的渐进式框架,也是一个非常典型的基于MVVM思想的框架

MVVM是什么

MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想,解释:

  • Model层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑
  • View代表UI组件,将数据模型转化成UI展现出来
  • ViewModel是一个同步View和Model的对象

在MVVM架构下,ViewModel通过双向数据绑定把View层和Model层连接起来,而View和Model之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM,不需要关注数据状态的同步问题。
在Vue中我们可以将Model层理解成data,View层理解成用来挂载Vue实例的DOM元素el:'#app',双向绑定是Vue内部实现的。
vue MVVM

Vue的优点

  • 低耦合:视图(View)可以独立于 Model 变化和修改,一个ViewModel 可以绑定到不同的”View”上,当View变化的时候Model可以不变,当Model变化的时候 View 也可以不变
  • 可重用性:你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑
  • 独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用 Expression Blend 可以很容易设计界面并生成 xml 代码
  • 可测试:界面素来是比较难于测试的,而现在测试可以针对 ViewModel 来写

Vue生命周期

vue lifecircle

  • beforeCreate:在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用
  • created:实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调
  • beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用
  • mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子
  • beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前
  • update:当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环
  • beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用
  • destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用

知识点总结

vue kg

  • 计算属性与侦听器
    • 计算属性缓存 vs 方法: 我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。
    • 计算属性 vs 侦听属性:当需要在数据变化时执行异步或开销较大的操作时,侦听这个方式是最有用的

组件间传值

  • 父组件向子组件传递数据
    • 子组件:通过props接受数据
    • 父组件:通过在子组件标签上使用v-bind或者直接赋值传值给子组件
  • 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解
  • 子组件向父组件传递数据
    • 子组件:使用内建的 $emit 方法并传入事件的名字
    • 父组件:使用v-on监听这个事件,就像监听一个原生 DOM 事件
  • v-model:结合两者,双向传递

Vue的双向数据绑定是怎么实现的

链接

  • 将MVVM作为数据绑定的入口,整合Observer,Compile和Watcher三者
  • 通过Observer来监听自己的model的数据变化,当数据变化时Dep订阅者会发出通知
  • Watcher接到通知会调用Compile里面的更新回调函数更新视图
  • 通过Compile来解析编译模板指令:将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知
  • 最终利用watcher搭起observer和Compile之间的通信桥梁,达到数据变化 —>视图更新;视图交互变化(input)—>数据model变更双向绑定效果。

文章作者: Susie Chang
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Susie Chang !
 上一篇
Vue学习(二)之渲染函数 Vue学习(二)之渲染函数
基础 一般我们通过模板可以快速的创建一个HTML;但是在某些情况下使用render 函数可以让我们使用JavaScript更加快速地创建页面 vue渲染过程:模板通过编译生成AST,再由AST生成Vue的render函数(渲染函数),渲染函
2018-10-16
下一篇 
DOM详解(二) DOM详解(二)
选择符API querySelector: 接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,则返回nullvar body = document.querySelector("body"); var myDiv
2018-10-12
  目录