vue基础

1、vue的特点

1.三大前端框架

目前前端有两个非常流行的框架，非别是reactjs,vuejs。而这三个当中，vuejs的受欢迎度目前是最高的，而开发vuejs的就是一个中国人尤雨溪。

1.2 vue的优势

    Vue致力解决的问题与React一致，但却提供了另外一套解决方案。Vue使用模板系统而不是JSX，使其对现有应用的升级更加容易
    Vue的开发者尤雨溪是中国人，框架本身提供了大量丰富的中文文档，这也为Vue的发展和使用带来巨大的优势。
    Vue框架适合于需要快速上手、上线的应用，还适用于迁移传统的多单面应用。

2、vue的下载和使用

2.1直接用<script>引入

2.2 使用CDN

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

什么是MVVM（前后端分离）

M：model 模式存储数据

V：view 显示内容（html）

VM viewModel视图模块 连接视图与modelcompon模型 （

）

当model数据发生变化.时候通过VM可以监听变化更新视图

当view视图发变化时候通过VM可以监听变化自动更新model数据

3.1 vue的模版

    <div id="app">
      <button @click="change">改变数据</button>
      <!-- {{}}里是js的表达式 -->
      <h1>{{msg - 8}}</h1>
    </div>

3.2 vue的实例化

    // jquery是以DOM做为驱动
    // Vue是以数据做为驱动
     
    let vm = new Vue({
      // 挂载点
      el: "#app",
      data: {
        //只有注册在data当中的数据才是响应式数据，数据改变，会触发视图的重新渲染
        msg: 'hello world'
      },
      // 方法
      methods: {
        change(){
          // this等价于vm这个vue的根实例
          this.msg = 'hahaha';
        }
      }
    })

4.插值语法

    数据

    let vm = new Vue({
        data: {
        msg： "hello"
      }
    })

模版

    <h1>{{msg}}</h1>   
    <h1>{{msg - 8}}</h1>

5.vue指令

    指令的属性值为js表达式

5.1 v-html

    可以解析html标签

    <h1 v-html="msg"></h1>
    <h1 v-html="msg + 'world'"></h1>

5.2 v-text

不能解析html标签

<h1 v-text="msg"></h1>

5.3 v-bind

绑定动态属性

    <h1 title="msg">1111</h1>
    <h1 v-bind:title="msg">2222</h1>
    <h1 :title="msg">2222</h1>

5.4 v-on

5.4.1 事件绑定

js 数据

    var vm = new Vue({
        el: '#app',
        data: {
            isShow: false,
            msg: '1111'
        },
        methods: {
            //没有参数的绑定
            show(){
                this.isShow = true;
            },
            //有参数的绑定
            change(newVal){
                this.msg = newVal;
            },
     
            //获取事件对象
            get(e){
                console.log(e);
            },
            //获取事件对象
            get(newVal,e){
                this.msg = newVal.isShow;
                console.log(e);
            }
        }
    });

模版

    <p v-on:click="show">显示</p>
    <p @click="show">显示</p>
    <p @click="change('hello')">改变msg</p>
    <p class="box" @touchmove="get">改变msg</p>
    <p class="box" @click="get('hello',$event)">改变msg</p>

5.4.2 事件绑定的修饰符

    v-on:keyup.enter.13 按键修饰符
    v-on:click.stop 阻止冒泡
    v-on:click.prevent 阻止浏览器默认行为

5.5 v-if v-else-if v-else

条件渲染指令

v-if:如果表达式为真，则渲染该元素，如果为假，则不渲染（dom不存在）

v-if和v-else之间不能有其它内容

    <p v-if="count > 80">红色</p>
    <p v-else-if="count > 60">蓝色</p>
    <p v-else>绿色</p>

5.6 v-show

条件渲染指令

如果表达式为真，则显示该元素，如果为假，则隐藏该元素（dom存在）

<p v-show="0">红色</p>

v-if与v-show的区别

    都可以隐藏节点
    v-show通过css方式隐藏
    v-if 直接移除dom节点
    频繁切换显示与隐藏用v-show反之用v-if

5.7 v-for

列表渲染指令

    new Vue({
       data: {
         arr: ['Amy', 'Rose', 'Black'],
         person: {
           name: 'Rose',
           age: 34,
           class: 'H5'
         }
      }
    })

5.7.1 遍历数组

    <li v-for="item in arr">{{item}}</li>
    <li v-for="item of arr">{{item}}</li> -->
    <li v-for="(item,index) in arr">{{item}}----{{index}}</li>

5.7.2 遍历对象

    <li v-for="item in person">{{item}}</li> -->
    <li v-for="(item,key) in person">{{key}}-----{{item}}</li>
    <li v-for="(item,key,index) in person">{{index}}----{{key}}-----{{item}}</li>

在vue-for循环中为什么要绑定key值

    key为了让vue虚拟dom节点查找与更新更加优化（优化dom的渲染）

    vdom 优化diff算法：

            v-for为什么要加key,因为兄弟节点之间要求key必须保持唯一性，key可以提高diff算法，
             提高列表在排序或者是筛选时的渲染速度

5.8 v-model

双向数据绑定

js数据

    new Vue({
      data: {
        tel: '123'
      }
    })

Vue2 响应式原理，（双向绑定的原理）

通过订阅与发布者模式结合

通过Object.defineProperty劫持对象的getter与setter

观察者来连接视图与数据

当数据发生变化时候通知说要订阅该数据的订阅者更新

模版
Vue3响应式原理

ES6新增的 proxy代理实现的

vue3 与Vue2的区别

    响应式原理不同：Object.defineProperty和Proxy

    启动方式不同

    vue2
    new Vue({
        store,
        router,
        render:h=>h(App)
    }).$mount("#app")

    // vue3
    createApp(App).use(store).use(router).mount("#app")

    // vue2
    Vue.prototype.$http = axios;
    // vue3
    app.config.globalProperties.$http = axios;

    Vue3 增加了setup 组合式api

    <p>请输入手机号：<input type="text" v-model="tel"></p>
    <p>{{tel}}</p>

5.9 v-once

只渲染一次

<span v-once>This will never change: {{msg}}</span>

什么是生命周期？
          生命周期就是vue实例从创建到销毁的全过程，也就是 new Vue() 开始就是vue生命周期的开始。Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom-->渲染、更新-->渲染、卸载 等一系列过程，称这是Vue的生命周期
生命周期的钩子函数：

        钩子函数是Vue生命周期中每个阶段对外开放让程序员操作Vue的接口。Vue有8个钩子函数。

                beforeCreate( ){ }  实例创建前

                因为此时vue实例还没有创建，那么就无法访问到 data 中的数据，并且 dom 视图也没有更新，所有的结构都停留在原始的状态

                create( ){ }   实例创建后

                这里是，最早能够调用 data 数据和 methods 方法的周期函数 ，此时，data 数据和 methods 方法已经可以调用，但是 dom 视图并没有更新

                beforeMount( ){ } 实例挂载前

                 在当前生命周期中，页面呈现的是原始 dom 结构，但是此时虚拟 dom 已经创建完成， 在 mounted 生命周期，会覆盖所有的 dom 所有的dom操作，均不奏效

                mounted( ){ } 实例挂载后

                在此周期之前的所有的dom操作，都不凑效，在这里可以做 dom 操作，并且所有的dom操作都能够展现出视图的变化

                beforeUpdata( ){ } 实例（试图）更新前

                在数据更新的时候触发；此时 data 数据是最新的，但是并没有更新到视图上，就是 数据视图内容不同步

                updated( ){ }  实例（试图）更新后

                数据更新后，此时数据是最新的，视图也是最新的，实现了数据 和 视图内容 双同步

                beforeDestroy( ){ }  实际销毁前

                实例销毁前，在这里是最后一次，能够访问的到 data 的数据和 methods 方法的生命周期

                destroyed( ){ }  实例销毁后

                实例销毁后，当触发了这个声明变量的时候，代表者，当前的vue实例已经被销毁的，所有的 data 数据 和 methods 方法，都不能用了

组件传参：

        父传子 在父组件中通过属性的方式向子组件传参  子组件中通过props接收参数

        子传父 在子组件中通过$emit调用父组件的自定义事件 在父组件的自定义事件中通过$event接收参数

        非父子关系：

        ref获取引用

        依赖注入：provide inject

        vuex

        vue2（选项options） envetBus传参”；$parent父对象，$chilren子对象 $root根节点

        
Vue 路由钩子函数

        路由钩子的执行流程，钩子函数种类有：全局守卫、路由守卫、组件守卫。        

        完整的导航解析流程：

                1、导航被触发。

                2、在失活的组件里调用 beforeRouteLeave 守卫。

                3、调用全局的 beforeEach 守卫。

                4、在重用的组件调用 beforeRouteUpdate  守卫（2.2+）。

                5、在路由配置里面 beforeEnter。

                6、解析异步路由组件。

                7、在被激活的组件里调用 beforeRouteEnter。

                8、调用全局的 beforeResolve 守卫（2.5+）。

                9、导航被确认。

                10、调用全局的 afterEach 钩子。

                11、触发 DOM 更新。

                12、调用 beforeRouteEnter 守卫中传给next的回调函数，创建好的组件实例会作为回调函数的参数传入