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");

        骨屏架构加载

        首屏采用服务端渲染