vue04----watch、slot、响应式原理、set、vue脚手架（vue-cli）、单页面应用和多页面应用、单页面开发首屏加载过慢，白屏如何缓解
### watch监听：监听数据的变化
data:{
age:24
},
methods:{
add(){
this.age++;
}
},
watch:{
age(newValue,oldValue){
console.log("新值",newValue)
console.log("旧值",oldValue)
console.log(this.$refs.p)// watch中的DOM是修改前的（新值）
console.log(this.$refs.p.innerHTML)//旧值
}
}
①watch中的函数名称是data中的属性名称，因为watch也是依赖data中的属性，当data中的属性发生改变的时候，watch中的函数就会执行
②watch中的函数有两个参数，一个是newValue，一个是oldValue
③watch中的函数不需要调用
④watch只会监听数据的值是否改变，而不会监听数据的地址是否发生改变，如果需要监听对象的变化，需要进行深度监听
⑤特殊情况下，watch是兼听不到数组的变化的，例如数据的修改，通过length来清空数组
⑥如果想要检测到数组的变化要用splice或$set
⑦immediate（立即的）用来做页面首次加载的时候做一次监听（immediate:true）
### 插槽：slot，在组件内开辟一块空间，用来存放组件标签内部的内容
命名插槽：<p slot="wql"></p>
<slot name="wql">
### 响应式原理：
vue最大的特点就是数据驱动视图。
vue的数据发生改变，页面一定发生改变？不一定。
当操作引用类型的数据，动态添加属性时，页面不会发生改变。
vue响应式数据的原理（也叫数据绑定原理、双向数据绑定原理）：
底层是Object.defineProperty()，目前vue2.6版本和将来的vue3.0（proxy）都是通过给data中的数据添加一个数据劫持（setter和getter方法），写在data中的数据自动加数据劫持。但是不管哪种版本，ie浏览器都有兼容性问题，vue2.6不兼容ie8以下，vue3.0不兼容ie11.
Object.defineProperty()处理data中的数据，数据就添加上get和set方法，数据获取的时候触发get，数据修改的时候触发set。在修改数据的时候，优先触发set，触发watcher监听，再通知页面。
vue中如果动态添加属性，该属性就没有经历过处理，就没有set和get方法，所以数据变页面不变。
只有在data中的数据，在组件创建的时候，会执行Object.defineProperty()，拥有setter和getter。
vue提供一个实例方法：vm.$set()可以添加一个响应式属性，会触发视图的更新。
### vm.$set(目标对象,"动态添加的属性名","属性值")
向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新，它必须用于响应式对象上添加新属性，因为vue无法探测普通的新增属性。
data:{
info:{
name:"吴小明",
age24
}
}
methods:{
changeSex(){
// data中的info中没有sex，动态添加的sex原本是没有set和get的，这里用Vue.set()处理过就有了
Vue.set(this.info,"sex","男");
}
}
Vue.set(目标对象,"动态添加的属性名","属性值") 实例中使用，不带$
Vue.$set() 组件中使用，带$
Vue.set()和this.$set()一样
tip：如果使用this.info.sex="男";就用this.$forceUpdate()强制刷新也可以
### vue脚手架（vue-cli）
2018 vue-cli 2.9.6
2019 vue/cli 3.9.3 操作简单
npm install -g @vue/cli 安装vue-cli脚手架工具
vue --version 查看脚手架工具的版本
vue create demo 创建一个项目
vue创建项目过程：
①vue create demo vue版本：3.9.3，node版本：12.8.0
②Manually select features
③Babel、CSS Pre-processors（Router和Vuex暂时没装）
④Less
⑤In dedicated config files
⑥n
vue项目启动：npm run serve
查看文件目录：mac：ls window：dir
文件的目录结构：
node_modules 安装的插件
public 公有目录
index.html 网页的入口文件，提供实例的挂载点
src 源码目录
assets 资源目录
components 组件
xxx.vue 单文件组件
main.js js的入口文件，创建一个实例，渲染一个根组件，将根组件挂载到渲染元素上
使用组件：
1、创建组件 xxx.vue
2、抛出组件 export default {}
3、哪里用哪里引入 import 组件名 form "路径";
4、将引入的组件注册到components
components:{组件名}
5、将组件名当成标签名使用
常用指令：
npm install 按照package.json按照插件
npm run serve 本地环境下运行
npm run build 线上的编译打包 把js文件夹里的map文件删掉，给服务端人员上线
预处理语言：less sass stylus
全局安装yarn：npm install -g yarn
卸载less：npm uninstall less less-loader
### Q：
1、单页面应用和多页面应用
单页面：SPA，只有一个html页面，浏览器一开始就加载所有的html、css、js。在交互时用路由动态载入，页面切换只刷新局部内容，不进行跳转。
多页面：MPA，一个应用中有多个html页面，页面跳转时是整页刷新。
单页面的优点：
用户体验好
前后端分离
页面效果比较炫酷（如页面切换时的专场动画）
跳转流畅
组件复用，开发便捷
单页面的缺点：
不利于SEO
导航不可用，如果一定要用导航需要自己实现前进和后退
首屏加载过慢
页面复杂度高
2、单页面开发首屏加载过慢，白屏如何缓解
路由懒加载：
①vue异步组件的方式 component:resolve=>require(["../page/home/index.vue"],resolve);
②ES6的import方式（推荐） component:()=>import("../page/home/index.vue");
骨屏架构加载
首屏采用服务端渲染
