【Vue.js 实例】vue.js看着官方文档的从0开始瞎摸学习

栏目: 编程语言 · 发布时间: 3年前

内容简介:引用文字每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的当一个 Vue 实例被创建时,它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。

引用文字每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的

var vm = new Vue({
  // 选项
})

- 数据与方法

当一个 Vue 实例被创建时,它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。

【Vue.js 实例】vue.js看着官方文档的从0开始瞎摸学习

【Vue.js 实例】vue.js看着官方文档的从0开始瞎摸学习

注意:当这些数据改变时,视图会进行重渲染。值得注意的是只有当实例被创建时 data 中 存在的属性 才是响应式的( Vue 会在初始化实例时对属性执行 getter/setter 转化)。也就是说如果你添加一个新的属性,比如:

【Vue.js 实例】vue.js看着官方文档的从0开始瞎摸学习

看完这些代码不由地对“$"这个符号感到疑惑,于是去查了相关的 API

实例创建之后,可以通过 vm.$data 访问原始数据对象。"$",其实是Vue创建的实例。

接着是 深入响应式原理

(1)检测变化的注意事项

对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。以下是小demo。

【Vue.js 实例】vue.js看着官方文档的从0开始瞎摸学习

【Vue.js 实例】vue.js看着官方文档的从0开始瞎摸学习

(2)声明响应式属性

由于 Vue 不允许动态添加根级响应式属性,所以你必须在初始化实例前声明所有根级响应式属性,哪怕只是一个空值

【Vue.js 实例】vue.js看着官方文档的从0开始瞎摸学习

【Vue.js 实例】vue.js看着官方文档的从0开始瞎摸学习

将message 设为空值(在 data 选项中声明 message),

【Vue.js 实例】vue.js看着官方文档的从0开始瞎摸学习

【Vue.js 实例】vue.js看着官方文档的从0开始瞎摸学习

(3)异步更新队列

当你设置 vm.someData = 'new value',该组件不会立即重新渲染。当刷新队列时,组件会在下一个事件循环“tick”中更新。

为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。

【Vue.js 实例】vue.js看着官方文档的从0开始瞎摸学习

【Vue.js 实例】vue.js看着官方文档的从0开始瞎摸学习

实例生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

例如(created):

【Vue.js 实例】vue.js看着官方文档的从0开始瞎摸学习

【Vue.js 实例】vue.js看着官方文档的从0开始瞎摸学习

还有其他的生命周期钩子

【Vue.js 实例】vue.js看着官方文档的从0开始瞎摸学习

注意不要使用箭头函数,因为生命周期钩子的this上下文只想它的Vue实例,但是箭头函数没有this

【Vue.js 实例】vue.js看着官方文档的从0开始瞎摸学习

生命周期图示

【Vue.js 实例】vue.js看着官方文档的从0开始瞎摸学习


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数据结构与算法JavaScript描述

数据结构与算法JavaScript描述

[美] Michael McMillan / 王群锋、杜 欢 / 人民邮电出版社 / 2014-8 / 49.00元

通过本书的学习,读者将能自如地选择最合适的数据结构与算法,并在JavaScript开发中懂得权衡使用。此外,本书也概述了与数据结构与算法相关的JavaScript特性。 本书主要内容如下。 数组和列表:最常用的数据结构。 栈和队列:与列表类似但更复杂的数据结构。 链表:如何通过它们克服数组的不足。 字典:将数据以键-值对的形式存储。 散列:适用于快速查找和检索。......一起来看看 《数据结构与算法JavaScript描述》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具