vue知识点

vuex的使用 为了提供store

// 引入vue
import Vue from 'vue';
// 引入vuex
import Vuex, { Store } from 'vuex';

// 1 安装vuex
Vue.use(Vuex);


// 2 创建store对象
// let store = new Vuex.Store()


let store = new Store({
    // 传递各个组成部分
    // 数据
    state: {
        num: 0
    },
    // 同步消息
    mutations: {
        // 增加数字
        addNum(state, num, ...args) {
            // console.log(111, 'addNum', args)
            // 更新数据
            state.num += num;
        },
        // 减少数字
        deleteNum(state, num, ...args) {
            // console.log(222, 'deleteNum', args)
            // 更新数据
            state.num -= num;
        },
        // 同步消息
        clearNum(state, num) {
            // 更新数据
            state.num = num;
        }
    },
    // 异步消息
    actions: {
        // 清空数字
        clear(store, num, ...args) {
            // console.log('clear', args)
            // 启动定时器
            setTimeout(() => {
                // 更新数据
                store.commit('clearNum', num)
            }, 3000)
        }
    }
})


// 增加数字
let AddNum = Vue.extend({
    // 模板
    template: `
        

            增加5  
            

            

            
            3秒之后，清空数据
        
    `,
    // 组件创建完成
    created() {
        // console.log('AddNum', this)
    }
})
// 显示数字
let ShowNum = Vue.extend({
    // 模板
    // 5 一个组件使用数据
    template: `
        

            
num: {{$store.state.num}}
        
    `,
    // 组件创建完成
    created() {
        // console.log('ShowNum', this)
    }
})

// 3 实例化
new Vue({
    // 3 注册store
    // store: store,
    store,
    // 容器
    el: '#app',
    // 注册组件
    components: { AddNum, ShowNum },
    // 数据
    data: {},
    // 组件创建完成
    created() {
        // console.log('app', this)
    },
    // 方法
    methods: {
        // 发布消息
        sendMessage() {
            // 4 一个组件发布消息
            // this.$store.commit('deleteNum', [2, 100, true])
            this.$store.commit('deleteNum', 2)
        }
    }
})

步骤：

​ 1、引入vuex 包

​ 2、 创建store对象

​ 3、 实例化中 注册 store

vue路由

​ 前端路由： 通过地址找到对应的页面

​ 由于hash的改变不会向服务器发送新的请求， 因此我们可以监听hash的变化（通过hashchange事件）。

获取hash 通过 window 的对象 location 里面就是一个hash 属性。

​ 单页面应用程序就是基于前端的hash路由实现的。 不向服务器发送请求，而实现切换页面的功能，

就是单页面应用程序

​ vue为了让我们更方便的使用路由， 提供路由模块 vue-router

​ 一共分为6步

• 第一步 安装路由 Vue.use

• 第二部 创建组件对象 Vue.extend的参数对象

• 第三步 定义路由规则

​ 是一个数组，每一个成员代表一条规则

​ name 代表名称

​ component 代表渲染的组件

​ path 匹配规则（与express类似）

​ 静态路由：一个规则对应一个页面

​ /home/search

​ 匹配 /home/search

​ 不匹配 /home, /home/search/1, /list/search

​ 动态路由：一个规则对应多个页面

​ /list/:page

​ 匹配 /list/1, /list/100, /list/demo

​ 不匹配 /list, /list/1/2, /home/1

• 第四步 实例化路由

​ new Router({ routes })

​ 通过routes属性传递路由规则

• 第五步 在vue实例化对象中，注册路由

​ 通过router属性注册。

• 第六步 在模板中，通过router-view组件，定义路由的渲染位置。

为了切换路由方便， vue 路由 为我们提供了 路由导航组件， router-link 组件

• router-link组件与a标签相比，router-link组件会适配不同的策略。

vue生命周期到底干了什么？

• beforeCreate

  • 在实际初始化之后，数据观测（data observer）和 event/ watcher 事件配置之前被调用。

• created

  • 在实际被创建完被立即调用。 数据观测，属性和方法的运算，watch/event事件回调。
  • 此时的 $el 还不能用

• beforeMount

  • 在挂载开始之前被调用：相关的 render 函数首次被调用。

• mounted

  • 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。

• beforeUpdate

  • 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
  • 该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行

• updated

  • 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

• actived

  • 被 keep-alive 缓存的组件激活时调用。

    该钩子在服务器端渲染期间不被调用。

• deatived

  • 被 keep-alive 缓存的组件停用时调用。

    该钩子在服务器端渲染期间不被调用。

• beforeDestory

  • 实例销毁之前调用。在这一步，实例仍然完全可用。

    该钩子在服务器端渲染期间不被调用。

• destory

  • 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

    该钩子在服务器端渲染期间不被调用。

• errorCaptured

  • 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。