Vue进阶

Contents

1. Vue进阶：

Vue进阶：

vue的初始化的选项中用了data,methods,el,computed。

vue实例的data对象

数据绑定离不开data里面的数据，也是vue的核心属性，vue绑定数据到html标签的数据源泉，另外Vue框架会自动监视data里面的数据变化，自动更新到HTML标签上。本质原理是：Vue自动将data里面的数据进行递归抓取换成getter和setter,然后就可以自动转化成HTML标签，当然用getter和setter所以老的浏览器Vue支持的不够友好。

data的数据类型：

1.类型是Object或者Function

2.如果是组件对象中，data必须是Function类型。

vue实例的computed

vue的计算属性会自动混入vue的实例中，所有的getter和setter的this上下文自动绑定为Vue实例，计算属性中定义的函数里面可以直接指向Vue实例的this;

methods

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

watch

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

设置el的详解

限制：只在new创建的实例中遵守。

提供页面上已存在的DOM元素作为Vue实例的挂载目标，也就是说Vue绑定的元素去哪里找，可以是CSS选择器，也可以是HTMLElemenet实例。

在实例挂载之后，元素可以用vm.$el访问。

如果这个选项在实例化时有作用，实例将立即进入编译过程，否则，需要显示调用vm.$mount()手动开启编译。

Vue的生命周期

Vue实例有一个完整的生命周期，开始创建，初始化创建，编译模板，挂载DOM，渲染，更新，渲染，卸载等一系列的过程 生命周期就是指Vue实例从创建到销毁的过程就是生命周期。

vue的整个生命周期提供了一系列的js事件。

vueçå½å¨æ

ue提供的可以注册的钩子都在上图片的红色框标注。他们是：

beforeCreate

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

beforeUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

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

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed

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

1
2

Vue实例的全局配置

官网

MyNotes

温故而知新