Vue P02-基本介绍

安装和引入

Vue实例介绍

简单实例

<div id="app">
<h1>{{ title }}</h1>
</div>
<script
src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></
script>
<script type="text/javascript">
var vm = new Vue({
el: '#app', // 绑定（mount）到DOM上
data () {
return {
title: 'Hello World'
}
}
})
</script>

生命周期

• 编译模板
• 选然虚拟DOM树
• 将实例挂载到DOM上
• 设置数据监听和数据绑定
• 钩子函数
  • 单独放在new Vue的框架里面
    • beforeCreate()
    • created()
    • beforeMount()
    • mounted()
    • beforeUpdate()
    • updated()
    • beforeDestroy()
    • destroyed()

数据响应式原理

最重要的概念响应式数据

• 衍生数据和元数据之间的响应，通过数据链来实现
• 视图和数据之间的绑定

初始数据链

• define：连通数据的链路

• 可以有一到多个数据起点

• 当修改数据起点时,所有存在在网上的节点值都将同步更新

得益于数据链，Vue总可以通过修改元数据的值来触发一系列数据的更新

函数式编程

结构化编程方式，力求将运算过程写成一系列嵌套的函数调用

• 作用：处理运算
• 函数体只包含运算过程
• 必带返回值

核心是根据元数据生成新的衍生数据

，使用函数式编程（加lambda表达式之后）可以使代
码看起来十分高大上，如以下代码所示：

let x = (x => (x => x * 9)(x) + 3)(5)
let y = y => (y => y * 9)(y) + 3
console.log(x)
console.log(y(5))

通过函数式编程，衍生数据也得以实现

实际上，函数式编程就是建立了一条数据流通的链路，开发者只需要关注输入和输出两端的内容就可以，这是封装复用的一种最佳实践

let 语句声明一个块级作用域的本地变量，并且可选的将其初始化为一个值

Vue中的数据链

Vue实例提供了computed计算属性选项，便于开发者生成衍生数据对象

计算属性以函数声明，不接受参数，只能以属性的方式调用

this指向Vue实例，可以获取实例上所有已挂载的可见属性

v-bind单向绑定

v-model双向绑定

数据绑定视图

vue中，把普通的JavaScript对象传给Vue实例的data选项时，Vue将遍历对象，并使用Object.defineProperty将其全部转换为getter/setter，并在组件渲染时将属性记录为依赖。之后当依赖项的setter函数被调用时，会通知watcher重新计算并更新其关联的所有组件。

由于Object.defineProperty是ES5中一个无法shim(自定义拓展)的特性,所以Vue应用无法运行在不支持Object.defineProperty的IE8及其以下版本浏览器上

<span id="harry" style="line-height: 32px;">&nbsp;</span>
<br>
<input id="trigger" type="text">
<script type="text/javascript">
let harry = document.getElementById('harry')
let trigger = document.getElementById('trigger')
let key = 'pro file' // 对象属性键名
let store = {} // 辅助get取值
let obj = { // 对象
pro file: ''
}
Object.de fineProperty(obj, key, {
set (value) {
harry.innerText = value // 重点：修改DOM节点视图
store[key] = value
},
get () {
return store[key]
}
})
trigger.addEventListener('keyup', function () {
obj[key] = this.value
console.log(obj[key])
})
</script>

使用Object API的defineProperty方法对其配置，属性配置项(描述符如下)

• configurable:false
• enumerable:false
• writable:false
• value:undefined
• set:undefined
• get:undefined

定义完成defineProperty()之后，在监听事件addEventListener中对对象进行操作时会进行调用