微信小程序生命周期
参考地址：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#生命周期回调函数
细节：onShow回调函数和onReady的区别？
参考地址：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#生命周期
前端面试题
数组去重方法1-2种
trim方法
addClass方法
removeClass方法
克隆方法
extend方法
vue起步
注意：VUE项目是一个单页应用开发！
当前最火的MVVM框架
了解一下：mvc，mvp
MVC:Model View Controller
模型(model)－视图(view)－控制器(controller)
一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。
MVP:Model-View-Presenter
MVP 是从经典的模式MVC演变而来，它们的基本思想有相通的地方：Controller/Presenter负责逻辑的处理，Model提供数据，View负责显示。
MVVM框架
数据相应原理
数据(model)改变驱动视图（view）更新
组件化
扩展HTML元素，封装可重用代码
单页应用和组件化编程思路
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：
组件设计原则（重点）
页面上每个独立的可视/可交互区域视为一个组件；
每个组件对应一个工程目录，组件需要的各种资源（js,css,images）在这个目录下就近维护；
页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面；
VUE项目组成的重点内容：
vue, vue-router, vuex
vue
相关参考地址：https://cn.vuejs.org/v2/guide/
Vuex: 项目的数据状态
Vuex相关api：https://vuex.vuejs.org/zh-cn/
vuex:https://vuex.vuejs.org/zh/guide/
vue路由
Vue路由api:https://router.vuejs.org/zh/
vue路由，Demo：https://github.com/chrisvfritz/vue-2.0-simple-routing-example
起步
环境搭建和配置
安装nodejs：http://nodejs.cn/
淘宝NPM镜像：https://npm.taobao.org/
安装淘宝镜像：$ npm install -g cnpm --registry=https://registry.npm.taobao.org
安装 vue-cli(Vue的脚手架) ：
cnpm install --global vue-cli 或者 npm install --global vue-cli
Tip：脚手架的意思是帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库(vue,vue-ruter)
项目执行命令
项目执行命令
全局安装 vue-cli
$ npm install --global vue-cli
创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
安装依赖
$ cd my-project
$ npm run dev
Runtime Only 和 Runtime+Compiler的区别
Runtime Only
我们在使用 Runtime Only 版本的 Vue.js 的时候，通常需要借助如 webpack 的 vue-loader 工具把 .vue 文件编译成 JavaScript，因为是在编译阶段做的，所以它只包含运行时的 Vue.js 代码，因此代码体积也会更轻量。
在将 .vue 文件编译成 JavaScript的编译过程中会将组件中的template模板编译为render函数，所以我们得到的是render函数的版本。所以运行的时候是不带编译的，编译是在离线的时候做的。
Runtime+Compiler
我们如果没有对代码做预编译，但又使用了 Vue 的 template 属性并传入一个字符串，则需要在客户端编译模板，如下所示：
// 需要编译器的版本 new Vue({ template: ‘
因为在 Vue.js 2.0 中，最终渲染都是通过 render 函数，如果写 template 属性，则需要编译成 render 函数，那么这个编译过程会发生运行时，所以需要带有编译器的版本。
总结：
1、一般我们写代码都是写在中；
2、这个编译过程对性能会有一定损耗；
所以通常我们更推荐使用 Runtime-Only的Vue.js；
项目命令
npm run dev：启动项目
npm run build：编译项目
dependencies 和 devDependencies是什么？有什么区别？
dependencies：运行程序是所依赖的模块，生产环境；
devDependencies：程序运行环境所需要的模块（less预处理插件，babel，es转换插件），开发环境；
修改别名的配置
webpack.base.conf.js文件
配置项目别名
alias: {
‘@’: resolve(‘src’),
‘cmp’: resolve(‘src/components’)
}
config/index.js配置文件
修改vue项目服务器端口号
我的第一个组件编写
创建一个vue实例，创建一个组件
hello world vue!
代码如下：
{{ msg }}
注意：包含3个主要的文件：template ，脚本，样式
vue-data
data：是vue组件实例中的一个属性；
代码如下：
data() {
return {
msg: “我的第一个组件1111111”
};
}
注意：data可以存放任意类型的数据
指令：v-for
这个是循环指令；
语法：
- {{ item.message }}
vue组件的生命周期
注意：整个项目，有且只创建一个vue实例！
注意：在自动化构建工具开发项目过程中，每个组件实例，并不是使用new Vue创建的，他们只是一个字面量对象！
虚拟dom结构
参考：https://www.jianshu.com/p/616999666920
create和mounted的区别
参考：https://blog.csdn.net/xdnloveme/article/details/78035065
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
必须弄懂 ：created和mounted的区别
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。
模板语法
参考地址：https://cn.vuejs.org/v2/guide/syntax.html
双大括号语法：{{}}
特性 + v-bind指令
例如：
Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：
特性
通用特性总结：id, class, name,
特性：通用特性，src ，href，checked，value…
例如：
事件处理
参考案例：https://cn.vuejs.org/v2/guide/events.html
指令：v-on：事件类型=“事件处理函数”
或者使用缩写形式： @事件类型=“事件处理函数”
事件名：click，dbclick,mouseenter。。。。
案例：
<input type=“button” value=“改变message的数值–>1234567” @click=“changeMsg” >
总结：
语法：@事件类型=“事件处理函数名”
语法：@事件类型=“事件处理函数(参数1，成熟2)”
计算属性
参考地址：https://cn.vuejs.org/v2/guide/computed.html
模板内的表达式
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
总结：在实际编码中，不要在{{}}内写如复杂的表达式，尽量避免去写表达式，推荐使用计算属性！
计算属性的语法
computed:{
计算属性名称(){
return "";
}
}
案例：
computed: {
reverseMsg() {
return this.message
.split("")
.reverse()
.join("");
}
},
实践：当data中的数据发生变化的时候，会触发计算属性监听回调函数，因此对应的计算属性数据也会发生变化。
计算属性setter的用法
代码如下：
reverseMsg: {
get() {
console.log("获取计算属性的数值");
console.log("数值发生了变化");
return this.message
.split("")
.reverse()
.join("");
},
set(newValue) {
console.log("设置计算属性");
console.log(`计算属性的newValue:${newValue}`);
this.message = newValue;
}
}
侦听器
参考地址：https://cn.vuejs.org/v2/guide/computed.html#侦听器
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
案例代码如下：
watch: {
message(newMsg, oldMsg) {
console.log(newMsg);
console.log(oldMsg);
let changMsg = "";
//异步从服务器上拉取数据，特点，有延迟
setTimeout(() => {
console.log("服务请求成功....");
changMsg = "服务器返回的数据";
this.reverseMsg =
this.message
.split("")
.reverse()
.join("") + changMsg;
}, 2000);
}
}
监听器和计算属性总结
同步执行的时候，改变数据状态，我们推荐使用计算属性；
异步操作数据的时候，推荐使用监听器属性；
如果没有开销比较大的情况，一般我们推荐使用计算属性，不是监听属性；
监听器属性开销要比计算属性要大；
vue组件化开发
创建组件三步骤：
编写template；
编写script；
编写style；
vue组件分为2大类型
一种是页面级别的组件（注意：本质还是组件）
一种是嵌套中的组件（子父组件的关系）
页面级别的组件的特点
通过路由来改变组件的状态；
在路由中配置组件；
嵌套组件
child.vue–>myFirstDemo组件中子组件
新建一个组件：
<template>
<div class="slider-ctn">
<h1>我是幻灯片组件</h1>
</div>
</template>
<script>
export default {};
</script>
<style scoped >
</style>
父组件关键代码：
导入：
import slider from "comps/slider";
注册：
components: {
slider
}
使用
<slider></slider>
组件的复用
父组件中代码如下：
<slider></slider>
<slider></slider>
<slider></slider>