vue知识回顾

一、Vue知识点

1、基本使用

1.1 数据驱动

​ 理念：当数据发生变化的时候，用户界面也会跟随变化，不用去手动修改dom

1.2 MVVM框架

​ MVVM框架主要包括：是一个架构设计模式，由Model、View、ViewModel三部分组成

​ Model：数据部分

​ View：视图部分

​ ViewModel：中间桥梁，连接View和Model（vue的实例）

​ 作用：实现了数据与视图的分离功能，当数据Model发生改变，ViewModel会监听到变化并通知View也做出改变，当View视图的事件触发，ViewModel也能事件，让Model做出响应。

难点：MVVM的三要素——响应式、模板、渲染

2、模板语法

2.1 Class与Style动态绑定

Class：

Class对象语法
<div :class="{active: true}"></div>	拥有active这个类名
<div :class="{active: isActive===0}"></div> 后面的判断为true就拥有active类名
Class 数组语法
<div :class="[active?activeClass:'']"></div>active为true就拥有activeClass类名，否则为空

Style：

Style对象语法
<div :style="{fontsize: ph+'px'}"></div>
<div :style="{color: active===item?'red':'pink'}"></div>
Style数组语法
<div :style="[styleColor,styleSize]"></div>
data() {
	styleColor: {
		color: 'red'		
	},
	styleSize: {
		font-size: '16px'
	}
}

​ Style 对象语法：:style="{ color: 'red', fontsize: ph + 'px' }"

​ 变化： :class="{ color: select===item?'red':'pink'}" 判断select是否等于item，正red假pink

3、条件渲染v-if与v-show

v-if是真正的条件渲染，控制元素是否存在，如果为false，则元素是不存在的。

v-show是通过css属性display来控制显示与隐藏。

如果需要频繁控制元素显示与隐藏，使用v-show避免大量DOM操作，提高性能；某元素满足条件，变化比较少使用v-if。

4、计算属性computed

computed是一个对象，里面可以定义函数，但这个函数可以当作属性来直接使用。

优点：避免模板中出现过多的逻辑；具有缓存功能，不像methods每一次都会执行，他会调用缓存的数据，计算属性所依赖的数据发生变化，才会重新取值。

<div>{{fullName}}</div>
computed: {
	fullName() {
		return this.firstname+this.lastname
	}
}

5、侦听器watch

侦听数据发生变化，如果数据发生变化，就执行相应的操作。允许在watch中处理异步操作

处理场景：异步操作或者开销较大的操作

watch与computed差异：

1. watch：适合一个值发生变化，对应要做一些其他事情，处理异步操作，一个值影响多个值

   computed：由其依赖的值而来，依赖值发生变化，对应的也发生变化，适合多个值影响一个值

2. computed计算属性有缓存功能，能使用计算属性尽量使用这个

3. watch适合异步操作或者开销比较大的操作

watch: {
	users: {
		immediate: true,//立即执行, 如果没有这个第一次渲染的时候不会执行，添加的话初始化也会执行侦听器
		handler(newValue, oldValue) {
			this.totalcount = newValue.length + '人数'
		}
	}
}
watch: {	// watch监听uname的变化，同时也改变了message的值，也可以发送其他的异步请求
	uname(value) {
		this.checkUserName(value)
		this.message='在异步请求中'	// 做了一些其他的异步操作
	}
}
computed: {
	fullName() {
		return this.firstname+this.lastname	// 2个值去得到1个值	一定要return
	}
}

6、生命周期

6.1 三大阶段

1. 挂载阶段(初始化相关属性，watch、methods)：beforeCreate、created、beforeMount、mounted
2. 更新阶段(元素或组件的变更操作)：beforeUpdate、updated
3. 销毁阶段(销毁相关属性)：beforeDestroy、destroyed

beforeCreate()：创建前，组件实例还没有创建
created()：创建后，组件初始化完成，各种数据可以使用，可以使用ajax发送异步请求获取数据
beforeMount()：挂载前，未执行渲染，更新，虚拟DOM完成，真实DOM未创建
mounted()：挂载后，真实DOM创建完毕，可以访问dom元素发送异步请求获取数据
beforeUpdate()：更新前，用于获取更新前各种数据状态
updated()：更新后，所有数据完成更新
beforeDestroy()：销毁前，用于处理一些定时器的清除
destroyed()：销毁后，子实例被销毁，所有事件监听移除

7、组件化开发

7.1、组件描述

将一个页面拆分成多个组件，每一个组件都具有不同的功能。

特点：可复用性，可维护，可组合

7.2、基本使用

Vue.component('componentActive', {template: "<p>我的世界</p>"})
// 在调用时候,遇到驼峰命名的需要使用-来进行拼接
<component-active></component-active>

一、微信小程序

1、基础语法使用

06-53

1. 在data中声明之后，页面中使用都需要{{}} mastauch语法，与vue不同，:src=“data” sec="{{data}}"

路由原理

路由怎么去设置的

子路由、路由懒加载路由守卫

路由模式怎么设定的

哈希模式和history 的区别

什么时候用哈希什么时候用history

computed和watch 的区别

es6语法：update: function() {} === update() { }

什么是异步

​ JS的事件循环机制：

在js解析执行时，会把任务分为2类，异步任务和同步任务，并且会将异步任务推送到任务队列中，同步任务放在执行栈中，在执行栈中的同步任务执行完成之后，再去任务队列中去取可以执行的异步任务，放到执行栈中执行。任务队列又分为微任务跟宏任务，微任务的优先级大于宏任务。微任务：Promise 宏任务：setTimeout