本文档详述了Vue2的各个核心概念，包括模板语法、数据绑定、响应式原理、事件处理、计算属性和监视属性，以及Vue的生命周期等。通过实例分析，解释了Vue如何实现数据管理，并探讨了数据代理、自定义指令和组件的生命周期。文章适合初学者和进阶开发者深入理解Vue框架的工作方式。
目录
一、入门案例
Vue可以看作是一个数据管理大师，其目的通常是将其管理的数据展示到HTML页面上，或者收集HTML页面上的数据进行储存在自身或者传递给服务器。
Vue管理的数据大致可以分为：Ⅰ，对象数据：对象里面包含一些基本数据类型和嵌套着一些其他对象。Ⅱ，数组；Ⅲ，函数。我们需要了解Vue是如何管理对象、数组、函数这3种数据类型，包括：如何响应式这些数据、如何代理这些数据等。
下面的代码是一个入门案例。首先引入vue.js的完整版，引入vue.js之后，在window上就多出了一个Vue构造函数对象，使用new Vue()就可以创建一个Vue实例对象vm，在创建vm的时候，需要把希望给vm管理的数据通过data配置项交给vm，把希望给vm管理的函数通过methods配置项交给vm。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初识vue</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h1>Hello！{
{name}}!</h1>
</div>
<script>
Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
new Vue({
el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data:{ //data用于存储数据，数据共el所指定的容器去使用
name:'么么哒'
}
})
</script>
</body>
</html>
vm实例在得到数据之后，首先会进行一系列的加工，然后把数据放到HTML页面上。所有需要告诉vm把数据放到哪个DOM节点。使用el配置项或者vm.$mount()就可以指定vm管理哪一个DOM节点(通常是div节点)。可以将一个字符串选择器或者一个DOM节点原始js对象交给el和$mount，例如：el:"#root"或者el:document.getElementByID("#root")。
在得到管理的模板之后，就可以将数据展示到模板当中了。使用模板语法中的插值语法将管理的数据name使用{ {name}}展示到模板页面当中。{ {}}里面必须是js表达式，这样才能够使用eval()函数进行运行识别，同时，{ {}}里面可以直接使用vm管理的数据。
二、模板语法
1.插值语法：使用双大括号{ {}}可以在模板中插入变量或表达式的值。例如：{ {name}}。
2.指令语法：Vue 提供了一些指令，例如v-for、v-bind等。
他们的共同点就是：{ {js表达式}}或者v-bind="js表达式"，作用就是将vm管理的数据呈现到HTML模板页面上。js表达式除了原始js表达式之外，还可以写vm自身管理的数据。
什么是js表达式？答案：执行之后能够得到具体值的语句。试想一下vm需要将数据展示到HTML页面当中，如果你不通过函数return数据、或者表达式计算出数据来，vm拿什么放到页面上面呢？当然undefined不会被vm放入到页面当中。
三、数据绑定
数据绑定的本质就是：1，vm将数据放到页面，称为单向绑定；2，一些表单节点可以采集数据，vm可以对他们进行收集，也可以把他们放到页面，称为双向绑定。思考：是否需要接触到DOM节点对象本身才能拿到这些数据呢？
因为存在表单类DOM节点，Vue不得已设计了两个指令来处理数据的绑定，对于表单类节点，例如<input>、<select>、<textarea>等，使用v-model指令进行数据的双向绑定；对于其他节点如<div>使用v-bind进行绑定。
v-bind可以简写为冒号：。v-model默认收集表单节点的value属性，那么可以使用v-model直接代替value，也就是v-model:value可以简写为v-model。
四、el和data的两种写法
el：一种是使用el配置项；另一种是使用vm.$mount()方法。
data：一种是直接传入一个对象；另一种是使用函数函数return一个对象。使用函数返回是为了避免多个组件或者多个vm实例共用同一个data数据配置项。原因：函数返回这种形式每次返回的data都是船新版本的对象；而直接传入data由于引用传递的原因导致大家都在操作同一个data配置对象。
五、MVVM模型
Vue就是典型的MVVM架构，M表示数据模型，也就是对象{}、数组[]等原始js数据组织形式；V就是view视图，也就是HTML页面；VM就是视图模型，也就是vm实例或者vc组件实例，负责数据管理和呈现。
六、Object.defineproperty方法
Object.defineproperty方法是Vue中实现数据代理和数据劫持的核心方法。但是不幸的是，这个Object.defineproperty只能对对象的属性进行操作（传入的第一个参数是对象），而对象包装的属性有3种：基本数据类型、对象、数组对象。
Object.defineproperty 的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，Object.defineproperty可以接收三个参数，Object.defineproperty(obj, prop, desc)。obj : 第一个参数就是要在哪个对象身上添加或者修改属性；prop : 第二个参数就是添加或修改的属性名；desc ： 配置项，一般是一个对象。
value：给定的初始值；
writable：默认为控制属性是否可以被修改，默认false；
configurable：控制属性是否可以被删除，默认false；
enumerable: 控制属性是否可以枚举，true的话简单的说就是可以遍历获取该值，默认false。
注意：当使用了getter或setter方法，不允许使用writable和value这两个属性(如果使用，会直接报错滴)。原因：都可以使用getter或setter方法了，难道还能把value固定或者writable变为false不成？
get 是获取值的时候的方法，获取值的时候会被调用，不设置时默认返回undefined。set 是设置值的时候的方法，设置值的时候会被调用。get或set不是必须成对出现，任写其一就可以。
七、Vue中响应式原理
Vue响应式的核心就是：数据被修改了、被读取了，Vue能够知道数据被修改或读取了。那只能依靠 Object.defineproperty这个API的set和get方法。而Object.defineproperty是针对对象属性的，拿到一个对象，不管这个对象嵌套了多深，Vue都是进行遍历将每一个对象的属性套上set和get方法，只有这样Vue才知道数据有没有被修改或者读取。
所以Vue无法直接处理数组对象，因为只有数组的地址变了，Vue才知道他所管理的这个数组被改变了，如果只是修改数组里面的值，Vue就无法进行监测，也就是数组里面的数据变化Vue是不知道的，所以Vue只能劫持重载数组对象的push、shift等方法才能知道数组里面的数据是否被修改。原因就是数组也是一个引用对象，只要地址不变，Vue就判断你没变，即使数组里面的数据已经变化了。什么是数组？内存里面连续的一段储存空间就是数组。
另外，后面的数据（不是通过data配置对象给的），就只能通过vm.$set()方法把数据变成响应式。而且这种方式存在效率问题，不管是线程执行时间还是内存消耗方面。
八、数据代理
什么是数据代理？数据代理就是使用A对象对B对象的属性进行操作。在Vue中，对象A就是vm，对象B就是data配置项(vm上的_data对象)、computed上面的属性、methods中的方法。还有其他组件传递过来的props属性等。
Vue为什么使用vm去代理vm._data？原因就是为了方便在模板语法当中或者vm实例当中可以直接使用vm._data上的数据。本质：Vue中的数据代理本质上就是两次Object.defineproperty封装，第一次是数据劫持，第二次就是数据代理，都是使用的 Object.defineproperty，但是目的不一样。
九、methods配置项
methods是Vue的options的配置项对象中的一个属性，其本身也是一个对象，但是里面放的是函数。这些函数最终也会被vm进行代理，从而可以通过vm去访问这些方法函数。这些方法一般写成普通函数，以确保函数执行时的this指向vm或者vc。
而this的作用就是能够从指定对象身上拿到一些数据。
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:'JOJO'
},
methods:{
showInfo1(event){
console.log(event)
},
showInfo2(evnet,num){
console.log(event,num)
}
}
})
</script>十、Vue中的事件处理
浏览器中的事件一般是通过浏览器的交互线程进行识别。浏览器的事件类型大致分为：鼠标事件、键盘事件（keydown、keyup、keypress）、表单事件（input、change、select）、网页状态事件（load、domcontextload、readystatechange等）、焦点/剪贴板事件（focus、blur等）、窗口事件（scroll、resize）、touch事件等。每种事件类型的event对象都是不同的，但是都存在currentTarget 、Target 、type三个属性以及preventDefault() 、stopPropagation()两个方法。
此外，事件还分为HTML事件、DOM0级事件、DOM2级事件。Vue中使用的DOM0级事件，也就给节点对应事件的回调从null改成Vue管理的函数或者其他地方的函数。因此，vm实例销毁之后，这些事件仍然存在。
当一个事件比如click由鼠标发出，浏览器的事件识别线程识别到了鼠标按下，然后生成一个事件对象event，这个event对象取决于事件类型，不同的事件类型的event对象是不一样的。就开始事件流，先从document节点开始捕获到具体节点，然后冒泡执行，冒泡阶段所有被捕获的节点的事件都会被触发。
在Vue当中，使用v-on：事件名指令或者@事件名称符号给节点绑定事件，例如下面的代码。事件回调一般写在vm中的methods配置项当中。建议使用function关键字写成普通函数，确保函数当中的this为vm或者vc。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件的基本用法</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id&#
最低0.47元/天 解锁文章
扫一扫
1397
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
