创建一个实例

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

数据与方法

当Vue实例按照上述方式被创建时，Vue的响应式系统中就加入了data对象，在使用中可以直接通过属性的调用方式进行使用，并且当这些属性值发生变化时，视图层会实时响应，自动匹配更新为新的值。

响应式：当实例被创建时data中存在的属性改变时，视图才会进行重新渲染。

所以，在创建Vue实例之外的地方添加新的属性时，这些属性并非响应式，任何改动都不会触发视图的重新渲染。所以，如果我们需要用到一些值，哪怕暂时性的不展示，也最好在创建实例时令它为空或null，设置一些相应类型的初始值，比如：

例外： Object.freeze() 方法可以冻结一个对象，冻结指的是不能向这个对象添加新的属性，这也意味着响应系统无法再追踪变化。如下：

除了数据属性，Vue实例还暴露了一些有用的实例属性与方法，他们都带有前缀$，以便于用户定义的属性区分，例如：

在官网中可以查看更详细具体的API教程。

实例生命周期钩子(官网内容，自我学习并使用)

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

比如created钩子可以用来在一个实例被创建之后执行代码：

也有其他的钩子，在生命周期的不同阶段被调用，这个在后面做介绍。

生命周期钩子的this上下文指向调用它的Vue实例。

警告⚠️：不要再选项属性或回调上使用箭头函数(ES6)。因为箭头函数是和父级上下文绑定在一起的，在箭头函数中使用this得不到你想要的结果，经常导致类型错。

生命周期

下面介绍实例的生命周期，这里先做个内容介绍，不需要一下子就懂，在后面不断深入的学习和使用中，慢慢剖析和理解，理论与实践相印证，这些价值会在未来体现出来。

生命周期是个非常重要的概念，要好好的理解和使用，同样的过程，在React中也是类似的。

本人也是前端爱好者，最近在看VUE的官网教程，内容中有很多是官网的指引，这些东西无法避免，我觉得官网的内容很好，我自己总结和实践去阐述自己的理解，并用自己的实战代码为大家展示出来。继而配合官网的章节教程，自己的一些实践也可以按照合理的学习路线走下去，希望知识不论在哪里都可以被合理地接受。

有意见和建议的朋友可以私信我，我会及时处理。

vue 箭头函数兼容性_前端学习计划之VUE学习（二）相关推荐

Vue钩子函数中的this为什么能指向Vue的实例而不是指向传入的参数options（Vue源码解读）
起因先看一段Vue的代码,在Vue的原型链上增加了一个setData方法,然后实例化Vue对象,传入一个Object类型的参数 Vue.prototype.setData = function (k ...
循环出按钮点击按钮显示按钮上面文字 vue el-button_前端学习计划之VUE学习（一）...
Vue 是什么 Vue是一套用于构建用户界面的渐进式框架. Vue被设计为可以自底向上逐层应用. Vue的核心库只关注视图层,易上手,便于和第三方库或既有项目整合. 现代化的工具链和各种类库结合使用, ...
vue解构赋值_前端开发es6知识模块化、解构赋值、字符串模板
项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍1.块级作用域 let const 2.箭 ...
for vue 一行2列_前端开发面试问什么？vue面试中经常问到的问题？用vue想拿20k，面试题要这样答！...
找工作,是一件愁人又具有期待的事情,前端开发的小伙伴们,最近有人参加面试了吗?面试前端开发时,一般会被问什么?你还记得吗?你的回答让你找到满意的工作了吗?生活是美好的,未来是可期的,工作是可以找到的, ...
vue computed使用_前端发展方向指南—Vue运行机制
点击上方蓝色字关注我们~01前言随着这几年前端的快速发展,页面中需要实现的功能越来越复杂,DOM操作频繁,使用传统的jQuery库去频繁操作DOM时不仅消耗性能,而且各种DOM绑定后期维护时简直是一场 ...
vue 初始化方法_前端发展方向指南—Vue源码初始化
Vue 的源码结构比较绕,同时使用了大量的面向对象的高级技巧.重写方法,扩展方法,多态等应用.从 Vue 实例的加载过程就可以看出来,这一节重点看看 Vue 的源码加载流程是什么. 前言 vue已是目 ...
es6 箭头函数使用_如何使用ES6箭头功能使JavaScript易于阅读
es6 箭头函数使用 Arrow functions are the new fundamental building blocks of building modern web applicatio ...
ant design vue table 高度自适应_很受欢迎的vue前端UI框架
最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己 ...
如何命令行结束react程序_前端架构React和Vue CTO的选择正确框架的指南
快速总结:为项目选择正确的javascript框架或库是CTO和项目经理的基本任务.然而,选择的范围很大程度上取决于几个因素,如项目时间.学习曲线.框架性能和团队规模.这篇文章旨在指导他们选择正确的j ...

vue 箭头函数兼容性_前端学习计划之VUE学习（二）

创建一个实例

数据与方法

实例生命周期钩子(官网内容，自我学习并使用)

生命周期

vue 箭头函数兼容性_前端学习计划之VUE学习（二）相关推荐

最新文章

热门文章