Vue概念原理
# 1.1 Vue介绍与描述
Vue是一套用来动态构建用户界面的渐进式JavaScript框架
- 构建用户界面:把数据通过某种办法变成用户界面
- 渐进式:Vue可以自底向上逐层的应用,简单应用只需要一个轻量小巧的核心库,复杂应用可以引入各式各样的Vue插件
# 1.2 Vue特点
- 遵循MVVM模式
- 编码简洁,体积小,运行效率高,适合移动/PC端开发
- 它本身只关注 UI,可以引入其它第三方库开发项目
- 采用组件化模式,提高代码复用率、且让代码更好维护
- 声明式编码,让编码人员无需直接操作DOM,提高开发效率
- 使用虚拟DOM和Diff算法,尽量复用DOM节点
# 1.3 与其他JS框架对比
- 借鉴angular的模板和数据绑定技术
- 借鉴react的组件化和虚拟DOM技术
# 1.4 MVVM模型
- M:模型Model,data中的数据
- V:视图View,模板代码
- VM:视图模型ViewModel,Vue实例
- data中所有的属性,最后都出现在了vm身上
- vm身上所有的属性 及Vue原型身上所有的属性,在 Vue模板中都可以直接使用
# 1.5 Vue基础使用
- 需要一个root容器,root容器里的代码被称为Vue模板
- 就必须创建一个Vue实例,且要传入一个配置对象
- Vue 实例与容器是一一对应的
- 中的 xxx 要写js表达式,且 xxx 可以自动读取到data中的所有属性
- 一旦data中的数据发生变化,那么模板中用到该数据的地方也会自动更新
<body>
<!-- root容器 -->
<div id="demo">
<h1>Hello,{{ name.toUpperCase() }},{{ address }}</h1>
</div>
</body>
<script>
// 创建Vue实例
new Vue ({
el:'#demo' //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串
data: { // data中用于存储数据,数据供el所指定的容器去使用,值暂时先写成一个对象
name: 'cess',
address: '成都'
}
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 1.5.1 Vue实例挂载
- 创建Vue实例对象的时候配置el属性
- 先创建Vue实例,随后再通过
vm.$mount('#XXX')
挂载
# 1.5.2 Vue实例data
- 对象式:
data:{ }
- 函数式:
data(){return {}}
- 使用组件的时候必须使用函数形式
- 不能使用箭头函数,会导致this不再是Vue实例了
# 1.6 数据监视
# 1.6.1 Vue2数据监视
- vue会监视data中所有层次的数据
- 如何监测对象中的数据?
- 通过setter实现监视,且要在new Vue()时就传入要监测的数据
- 对象创建后追加的属性,Vue默认不做响应式处理
- 如需给后添加的属性做响应式,请使用如下API
Vue.set(target,propertyName/index,value)
vm.$set(target,propertyName/index,value)
- 如何监测数组中的数据?
- 通过包裹数组更新元素的方法实现,本质就是做了两件事
- 调用原生对应的方法对数组进行更新
- 重新解析模板,进而更新页面
- 通过包裹数组更新元素的方法实现,本质就是做了两件事
- 在Vue修改数组中的某个元素一定要用如下方法
- push()pop()unshift()shift()splice()sort()reverse()这几个方法被Vue重写了
- Vue.set()或vm.$set()
- Vue.set() 和 vm.$set() 不能给vm或vm的根数据对象(data等)添加属性
- 数据劫持:将写的data加工后添加getter和setter的过程,将数据劫持在getter和setter里了
# 1.7 生命周期
- 又名生命周期回调函数、生命周期函数、生命周期钩子
- 生命周期函数是Vue在关键时刻帮我们调用的一些特殊名称的函数
- 生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的
- 生命周期函数中的 this 指向是vm或组件实例对象
# 1.7.1 VUE2生命周期
beforeCreate() {console.log('初始化但没有数据代理')},
created() {console.log('初始化且完成数据监测和数据代理')},
beforeMount() {console.log('虚拟DOM已经生成,但还没有转换为真实DOM')},
mounted() {console.log('VUE解析并把真实DOM挂载到页面上')},
beforeUpdate() {console.log('数据已经更新,但页面还未更新')},
updated() {console.log('页面和数据都更新完毕')},
beforeDestroy() {console.log('马上要销毁VUE实例')},
destroyed() {console.log('destroyed')},
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- 常用的生命周期钩子
- mounted发送ajax请求、启动定时器、绑定自定义事件、订阅消息等初始化操作
- beforeDestroy清除定时器、解绑自定义事件、取消订阅消息等收尾工作
- 关于销毁Vue实例
- 销毁后借助Vue开发者工具看不到任何信息
- 销毁后自定义事件会失效,但原生DOM事件依然有效
- 一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了
# 1.7.2 VUE3生命周期
- Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名
beforeDestroy
改名为beforeUnmount
destroyed
改名为unmounted
- Vue3.0也提供了 Composition API 形式的生命周期钩子,与Vue2.x中钩子对应关系如下
beforeCreate
===>setup()
created
=======>setup()
beforeMount
===>onBeforeMount
mounted
=======>onMounted
beforeUpdate
===>onBeforeUpdate
updated
=======>onUpdated
beforeUnmount
==>onBeforeUnmount
unmounted
=====>onUnmounted
上次更新: 2022/06/24, 10:36:25