Vuejs的数据驱动与组件

数据响应原理:

有一份数据a.b,在一个vue对象的实例化过程中,会给a.b这份数据通过ES5的Object.defineProperty属性添加了一个getter和setter,同时vuejs对模板做编译,解析生成一个指令对象(v-text=“a.b”),每一个指令对象都会关联一个Watcher,当我们的指令对应的表达式a.b做求值的时候,就会触发了它的getter,这里就会把依赖收集到Wathcer里面,当我们再次改变a.b的值的时候,我们就会触发它的setter,会通知到对应关联的Watcher,然后Watcher就会再次对a.b求值,算对比新旧值,当发现值改变了,Watcher又会通知到指令,让指令的update方法,由于指令是对DOM的封装,所以它就会调用原生DOM的方法去更新视图。

Vuejs基础知识点:

1.挂载点:指Vue实例中的el属性对应的id所对应的DOM节点。

2.模板:在挂载点内部的内容都叫作模板内容。

3.Vue实例:指定一个挂载点,填充一个模板内容,Vue会自动地结合你的模板和数据生成最终要展示的内容,然后会把这个内容放在挂载点之中。

4.“{{ xxx }}”的语法叫作插值表达式,里面可以放赋值、取值、三元表达式。

5.Vue的相关指令都是写在模板里的,所以也称作模板指令。

6.在Vue中,如果你想改变数据的显示,不要去改变DOM,你直接去改变数据就可以了。当数据发生变化的时候,Vue会自动地帮你去更新DOM,页面也就跟着变化了。

7.只要是模板指令等号后面跟着的内容不再是一个字符串了,而是一个JavaScript表达式,但是它特殊的地方在于这个表达式里的变量指的是Vue实例中data属性下的变量。

8.computed指的是一个属性通过其它属性计算而来,它有一个好处是如果其它属性全都没有改变,它会使用上一次计算属性的缓存结果,只有当其它属性中至少有一个值发生改变的时候才会重新计算,所以它的性能是比较高的。

9.watch侦听器:监测某一个数据或者计算属性发生了变化,一旦发生了变化,我们就可以在侦听器里面去写一些业务逻辑。

10.如果需要频繁地切换DOM元素的显示或隐藏,用v-show是一个比v-if更好的选择,因为每一次它不会去销毁DOM再重新创建DOM,所以它的性能相对更高一些,但是如果DOM元素的显示或隐藏的频率不是那么大,你只需要做一次显示或者隐藏,那这个时候用v-if是一个更好的选择。

11.建议尽可能在使用v-for时提供key,它会提升每一项渲染的效率,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。(key值要求每一项数据的key值都不相同,偶尔可以使用index下标作为key值)

12.每一个Vue组件都是一个Vue的实例,反过来每一个Vue的实例也都是一个Vue组件。

13.父子组件之间的交互:

(1)父→子:父组件通过属性的形式向子组件传递一些数据。

(2)子→父:子组件通过发布订阅的模式,也就是说,子组件发布一个事件,父组件恰好之前就已经订阅了这个事件,那么子组件就可以通过发布订阅模式向父组件传递一些数据了。

14.箭头函数:

(1)去掉function关键字。

(2)参数只有一个可以省略小括号,小括号和大括号之间有一个箭头。

(3)如果没有大括号则直接是返回值,有大括号必须要写return。

15.vm == ViewModel,data中的数据会被vm所代理,还可以通过vm.xx取到对应的数据内容。

16.过滤器:原数据不变的情况下,只是改变显示的效果。

17.template标签是Vue提供给我们的没有任何的实际意义,只是用来包裹元素的,并且v-show不支持template,只对v-if有效。

18.默认情况下,在切换DOM时相同的结构会被复用,如果不需要复用,需要添加key属性。

19.watch默认只监控一层的数据变化,如果需要监控多层数据,需采用深度监控{handler(){},deep: true}。

20.如果DOM元素不是通过v-for循环出来的,$refs只能获取到一个元素,而通过v-for循环出来的可以获取多个。

21.如果数据变化后想获取真实DOM中的内容,需要等待页面渲染完成后再去获取,所以所有的DOM操作最好放在$.nextTick()中;

22.局部组件三部曲:1.创建组件  2.注册组件  3.引用组件

23.组件是相互独立的,不能直接跨作用域,实例也是一个组件,组件中拥有生命周期函数。但是如果多个组件之间共用了数据,会导致多个组件同时更新。

24.ref属性如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例。

25.当子组件和父组件同时有用mounted方法时,需要等到子组件挂载完成后再触发父组件的挂载。

路由功能:

1.前后端分离:后端只负责提供数据接口供前端调用,页面的跳转都是由前端自己来处理。

(1)hash模式:开发时使用hash方式不会导致页面出现404,但是hash方式不支持SEO。

(2)HTML5的pushState API:正式上线时使用pushState方式。

原文地址:https://www.cnblogs.com/gyx19930120/p/9284785.html