Vue深入(1)

数据驱动理念

简单的来说，当数据发生变化时，页面也会跟着变化，开发者不需要手动修改dom

MVVM

M：modal：数据 V：view 视图 ViewModal：数据和视图连接的桥梁（实例化）
MVVM三要素：

计算属性

好处：有缓存的效果。当一个计算属性所依赖的数据发生变化时，他才会重新获取值
作用：计算的结果会被缓存，除非依赖的响应式prototype发生变化才会计算+
注意：如果某个依赖（非prototype）在该实例范畴之外，数据不会自动更新，示例如下：

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

watch和computed

watch： 执行异步操作或较大开销的操作 ，一个值影响多个值的变化
computed：多个值影响一个值的变化
由于computed有缓存 所以在实际操作中两个都能使用的时候 优先考虑computed

生命周期函数

挂载：

1. beforeCreate
2. created
3. beforeMount
4. mounted

更新：（元素或组件发生变化操作）

1. beforeUpdate
2. updated

销毁：

1. beforeDestory
2. destoryed

图解

在组件中关于data不是一个对象，而是一个函数的原因，官方文档有明确的说明

组件化理解

定义： 组件是可复用的实例
应用场景：

1. 通用型组件：实现最基本的功能，具有通信性和可复用性
2. 业务组件：用于完成具体的业务功能
3. 页面组件 ：页面中的内容应该放在独立的组件中，根据需求进行切换

路由组件缓存

<keep-alive include="要进行缓存路由的名称" ><router-view/></keep-alive>

注意：要设置缓存的路由时候 在定义router下的路由规则需要设置name属性 name的值和上面include的值一样
keep-alive有两个钩子函数：activated，deactivated
activated：执行时机为 当a页面跳转到b页面（必须是缓存页面）的时候触发 用来执行需要更新的数据
deactivated：执行时机 从b页面跳出的时候执行
点击刷新后执行的钩子函数：created—>mounted—>activated
应用场景： 当从商品列表页面跳转到商品详情页面，在点击返回的时候 数据并没有发生变化要展示的还是原来的数据的情况下 可以使用路由缓存

hash模式与history模式

设置方式 默认为hash模式
要设置为history模式 只需要在配置路由的地方加一个mode属性 值为history 就ok了
注意：history模式存在问题 在初次加载的时候页面没有问题，是由于第一次加载的时候是调用的h5中的history.pushState()加载，但是在刷新之后，前端会发送请求，后端是没有接口只是加载了静态资源的数据，只是将index.html返回，解决方式为导入connect-history-api-fallback 然后使用express的use中间件启用

const app = express()
const history = require("connect-history-api-fallback")
app.use(history())

nginx配置history路由模式原理及方法

错误识别处理

出现这种错误的原因是因为 vue有运行时版本和完成时版本 运行时版本不支持template模板语法 只有完成版本才支持template模板语法，完成时版本比运行时版本大10k左右
解决方式：两种

1. 设置vue.config.js文件的runtimepiler的值为true 将运行时版本改变为完整版（本质上也是通过构建render函数的方式 不过是自动转换 不需要人为动手）
2. 通过构建render函数的方式解决

 // template: `<a :href="to" ><slot></slot></a>`
      // 通过构建render函数的方式解决运行时版本不能解析template模板问题
      render(h) {
        // h有三个参数 
        //第一个参数 要创建的标签名，
        //第二个参数 要创建标签的属性 是一个对象 ， 
        //第三个参数 要创建标签前中嵌套的标签 是一个数组
         return h("a", {
          attrs: {
            href: this.to
          }
        },
        // 获取匿名slot的方式 为 this.$slot.default
        [this.$slots.default])
      }