vue入门知识总结

1.插值表达式 {{}}

   2.指令

       2.1 v-if 、v-else、 v-show、v-else-if

           v-if： 在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，开销较高，在运行时条件很少改变时使用。

           v-show：调整css dispaly属性，开销较小，在常频繁地切换时使用

       2.2 v-for

           数组 v-for=”item in items”

               加key diff算法高效的更新虚拟DOM

           对象 v-for=”(value, key, index) in object”

       2.3 v-text 、v-html

           v-text {{xxx}}取值有个弊端，当网速很慢或javascript出错时，会在页面显示{{xxx}}，Vue提供的v-text可以解决这个问题

           v-html 用于输出html代码

       2.4 v-on  

           <button v-on:click=”add”>加分</button>

           缩写 <button @click=”add”>加分</button>

       2.5 v-moudle

           需要在data中声明初始值

           单选 radio    多选 checkbox    下拉 select/option

       2.6 v-bind

           <img v-bind:src=”imgSrc”  width=”200px”>

           缩写 <img :src=”imgSrc”  width=”200px”>

       2.7 v-pre、v-cloak、v-once

           v-pre 在模板中跳过vue的编译，直接输出原始值，如果在标签中加入v-pre就不会输出vue中的data值了

           v-cloak 在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用

               [v-cloak] {

                   display: none;

               }

           v-once 只显示DOM第一次渲染的值，以后不改变了

生命周期

   new vue() 实例化对象  >  初始化生命周期和事件  >

   beforeCreate 实例刚被创建还没实例化，做一些初始化操作  >  初始化依赖注入和校验

   created 实例已创建，属性已绑定，dom未生成，$el属性不存在，此时可发起网络请求，结束加载动画  >

       has ‘el’ option 存在则继续，不存在则等到vm.$mount(el)继续编译  >

       has ‘template’ option 有则继续编译 render函数首次执行 否则用html

   beforeMount 完成虚拟dom，模板已编译，data里的数据和模板生成html，未挂载到页面上  >

       給vue实例添加$el成员，并替换掉挂载的dom元素

   mounted dom结构完成，可做网络请求  >

   beforeUpdate data数据发生变化，触发组件重新渲染，组件发生变化之前，虚拟dom已发生更改  >

       重新渲染虚拟dom，并通过diff算法对比vnode节点差异更新真实dom

   updated 组件更新之后

   beforeDestory 组件销毁之前  >  拆卸观察者、子组件、事件监听者

   destoryed 解绑，事件监听器移除，子实例销毁

常用选项

   methods

       用于html中绑定的方法

methods:{

            add(){

            }

        }

   计算属性

       对于任何复杂逻辑，都应当使用计算属性

       提供的函数将用作 vm.data. 的 getter 函数

       计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值，否则不会重新执行函数

          不是响应式依赖不缓存

computed:{

            fullName (){

                return this.firstName + this.lastName

            }

        }

       计算属性的getter/setter

computed:{

            fullName:{

                get：function(){

                    return this.firstName + this.lastName  
                },

                set: function(nameValue){

                    var names = newValue.split(' ')

                    this.firstName = names[0]

                    this.lastName = names[names.length - 1]

                }

            }

        }

   侦听器

       watch

       当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

watch:{

            question:function(newQuestion,oldQuestion){

                this.answer = 'Waiting for you to stop typing...'

                this.debouncedGetAnswer()

            }

        }

       对引用数据类型监听

watch:{

            obj:{

                handler(new，old){

                    执行回调

                }

                deep:true,  是否进行深度监听

                immediate:true 是否初始执行handle函数

            },

        }

   filters过滤器

filters:{

            filterA (value){

                return value.toUpperCase()

            }

        }

vue-cli

   安装 npm vue-cli -g  npm install -g @vue/cli

   升级 npm update -g @vue/cli

   检查版本 vue -V

   初始化项目 vue init <template-name> <project-name>

             <template-name>：表示模板名称，vue-cli官方提供的5种模板，一般使用webpack

   自动打开浏览器 config>index>autoOpenBrowser属性改为true

vue组件传值 传值取数据

父向子  
            父 :params=''

            子 props:{params:{required:true，type：string}}

        子向父

            子 @click='$emit('zxf',params)'

            父 @zxf='zxfSend' zxfSend(e){}

   事件总线

       vue事件总线就像所有组件的事件中心，在组件中，我们可以使用 $emit，$on，$off 分别来分发、监听、取消监听事件

       全局事件总线创建

// 创建写法1：

            let EventBus = new Vue() //vue实例可以作为事件总线

            Object.defineProperties(Vue.prototype,{

                $bus:{

                    get(){

                        return EventBus  

                    }    
                }

            })

            // 创建写法2：

            Vue.prototype .$bus = new Vue()

       全局事件总线操作

this.$bus.$emit('nameOfEvent', { ... pass some event data ...});

            this.$bus.$on('nameOfEvent',($event) => {

                // ...

            })

       事件总线

           创建一个单独的event-bus.js文件

import Vue from 'vue'

            let EventBus = new Vue()

            export default EventBus

        //事件总线操作

            import EventBus from event-bus.js

            //发送事件，第二个参数可选

            EventBus.$emit("aMsg", params}

            import EventBus from event-bus.js

            EventBus.$on("aMsg",(msg)=>{

            //  do something

            })

       在vue页面销毁时，同时移除EventBus 事件监听

beforeDestroy: function () {

            eventBus.$off('add-todo', this.addTodo)

            eventBus.$off('delete-todo', this.deleteTodo) //两个参数

        },

        methods: {

        addTodo: function (newTodo) {

            this.todos.push(newTodo)

        },

        deleteTodo: function (todoId) {

            this.todos = this.todos.filter(function (todo) {

            return todo.id !== todoId

            })

       }

       EventBus.$off() ———–移除当前组件的所有事件监听者

       EventBus.$off(param:string)————移除当前组件对某个事件的所有监听

       EventBus.$off(param:string,param)——-移除某个方法对某个事件的监听如：this.addTodo

   $parent / $children与 ref    

       ref：如果在普通的dom元素上使用，引用指向的就是dom元素，如果用在子组件上，引用就是指向组件实例

       this.$refs[‘string’]

       this.$parent.

       this.$children[].

       这两种方法的弊端是，无法在跨级或兄弟间通信

   $attrs/$listeners

       $attrs包含了父作用域中不被prop所识别(且获取)的特性绑定，当一个组件没有声明任何prop时，会包含所有父作用域的绑定，

       并通过v-bind=’$attrs’传入组件内部，通常配合inheritAttrs选项一起使用

       inheritAttrs: false, // 可以关闭自动挂载到组件根元素上的没有在props声明的属性

       $listeners包含了父作用域中(不含.native修饰器的)v-on事件监听器，它可以通过v-on=’$listeners’传入组件内部

       是$emit的偷懒写法

   provide与inject 用于父组件向子孙组件传递数据

       使用方法

           provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据

           provide：是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。

           inject：一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值

provide() {

                return {

                theme: this//方法一：提供祖先组件的实例

                };

            },

            inject: {

                theme: {

                //函数式组件取值不一样

                default: () => ({})

                }

            }

   父组件调用子组件方法

       通过 ref

       通过 $emit发射事件传事件

       通过 $emit/$on

       通过 $children[0]

       通过总线、vuex、

   子组件调用父组件方法

       通过 props传函数

       通过 $parent

       通过 $emit发生事件传信号

       通过总线、vuex

vuex

   vuex是vue.js应用程序开发的状态管理模式

   安装 npm install vuex –save

   使用  

import Vue from 'vue'

          import Vuex from 'vuex'    Vue.use(Vuex)

          new Vuex.store({

              state:{

              },

              getter:{

              }

          })

   访问数据 this.$store.state.

       用计算属性优雅

       使用mapState

import {mapState} from 'vuex'

            computed:{

                ...mapState(['name'])     //...mapState({aliasName:'name'})

            }

   vuex的getters，相当于vuex的计算属性，state参数必传

new Vuex.store({

            getters:{

                getName(state){

                }

            }

        })

        this.$store.getters.getName

        使用mapGetters

        import{mapState,mapGetters} from 'vuex'

        computed:{

            ...mapGetters(['getName'])

        }

   修改状态 Mutations

new Vuex.store({

            Mutations:{

                setName(state){

                    state.name = ''

                }

            }

        })

       使用方法 this.$store.commit(‘setName’)

       使用mapMutations

import{mapMutations} from 'vuex'

        在methods中解构

        methods:{

            ...mapMutations(['setName'])

        }

   异步修改状态Actions

actions:{

            asyncNewName(content){    可把commit解构出来

                return new promise(resolve=>{

                    setTimeout(()=>{

                        content.commit('setName')

                        resolve()

                    },1000)

                })

            }

        }

       使用方法 this.$store.dispatch(‘asyncNewName’,{})

       使用mapActions

       import {mapActions} from ‘vuex’

       在methods中解构

   moudle 把vuex模块化封装

vue-router

   #后hash值得变化，不会导致刷新页面，会触发hashchange

   widow.addEventLister(‘hashChange’,update)

   引：history 模式，H5提供pushState，replaceState两个API，通过API修改url地址不会发送请求刷新页面。

       因为没有#号更加美观，但当用户刷新页面时还是会发送请求，为了避免这种个情况，需要服务端支持，把所有路由重定向到根页面

   安装 npm install vue-router –save

import Vue from 'vue'

        import Router from 'vue-router'

        Vue.use(Router)

        export default new Router({

            routers:[

                path: '/',            //链接路径

                name: 'HelloWorld',        //路由名称，

                component: HelloWorld     //对应的组件模板

            ]

        })

   路由跳转

       通过router-link标签跳转

           <router-link :to=”{path:’/first’,params:{id:1}}”>first</router-link>，获取不到参数，路由不能加/:id,否则不能跳转

           <router-link :to=”{path:’/first’,query:{id:1}}”>first</router-link>

           <router-link :to=”{name:’first’,params:{id:1}}”>first</router-link>

           获取参数 this.$route.params.id   路由配置/first/:id 刷新不会消失

           <router-link :to=”{name:’first’,query:{id:1}}”>first</router-link>

           获取参数 this.$route.query.id   相当于get传参

       编程式跳转

           this.$router.push()

               this.$router.push(‘/home’)

               this.$router.push({name:’home’})

               this.$router.push({path:’/home’})

               this.$router.push({name:’home’,query: {id:’1′}})

               this.$router.push({path:’/home’,query: {id:’1′}})

               this.$router.push({name:’home’,params: {id:’1′}})

           this.$router.replace() (用法同push)

           this.$router.go(n)

   路由守卫

       Vue 路由 导航守卫(全局守卫、路由独享守卫、组件内守卫)

           to:即将要进入的目标路由对象

           from:当前导航即将要离开的路由对象

           next ：调用该方法后，才能进入下一个钩子函数（afterEach）

               next() 进入管道的下一个钩子

               next(false) 中断当前导航，回到from路由对应的地址

               next(‘/’) 或者next({path:’/’})跳转到其他路由

               next(error) 导航终止，且该错误会传递给router.onError()注册过的回调

       全局守卫

           router.beforeEach((to,from,next)=>{})

           router.beforeResolve((to,from,next)=>{}) 全局解析守卫，路由跳转前，所有组件内守卫和异步路由组件被解析之后触发

           router.afterEach((to,from)=>{})

       路由守卫  

           {

               path:’first’，

               name:’first’，

               component:’first’,

               beforeEnter:(to,from,next)=>{}

           }

       组件守卫

           beforeRouteEnter(to,from,next){}

           beforeRouteUpdate(to,from){} 组件内子路由更新

           beforeRouteLeave(to,from){}

面试题汇总

   vue修饰符

      .lazy 输入框光标离开时才改变    .trim过滤空格

      .number 将值转换为数字 先输入数字，只保留数字，先输入字母，number修饰符无效

      .stop 阻止冒泡    .capture 由外往内捕获

      .prevent 阻止默认事件    .native加在自定义时间上，保证事件能执行

   对象新属性无法更新视图，删除属性无法更新视图

       原因：Object.definePropertym没有对对象的新属性进行劫持

           使用Vue.$set(obj，key,value)

       删除用 Vue.$delete(obj,key)

   直接arr[index] = xxx无法更新视图

       原因：Vue没有对数组进行数据劫持

            使用数组的splice方法

            使用Vue.$set(arr，index,value)

   nextTick的用处

       Vue是异步更新 此方法是在更新之后

   SSR服务端渲染

   Vue响应式原理怎么实现的

       对象内部使用defineReactive方法，使用Object.defineProperty将属性进行劫持，数组则是重写，每个属性都有自己的dep属性

           存放他所依赖的watcher，属性变化时通知自己对应的watcher去更新

   为什么不对数组进行数据劫持？

       数据量

实际面试总结

   Vue页面加载优化

      路由懒加载

          路由懒加载的几种方法

          component:()=>import(‘@/views/login.vue’)  解构

          component:resolve=>require([‘@/views/login’],resolve)  引入并赋值

          const login = ()=>import(‘./views/login.vue’)

              component:login

          webpack提供的require.ensure()实现懒加载

               const HelloWorld=resolve=>{

                   require.ensure([‘@/components/HelloWorld’],()=>{

                       resolve(require(‘@/components/HelloWorld’))

                   })

               }

          路由懒加载做了什么事

              主要作用是将路由对应的组件打包成一个个的js代码块，只有在这个路由被访问到的时候，才加载对应的组件，否则不加载！

           组件懒加载

               const one = ()=>import(‘./one’)

                   components:{one}

               components:{

                   one：resolve=>require([‘./one’],resolve)

               }

      按需加载 elementui

      较大图片进行压缩/换成网络地址

      CDN引入

      不生成.map文件

           build出来的dist文件夹里面有很多的.map文件,这些文件主要是帮助线上调试代码，查看样式.

           由于基本都是本地调试好,线上不需要怎么修改,所以就禁止生成这些文件

           config>index.js中 productionSourceMap改为false

      使用gzip压缩

           安装compression-webpack-plugin

   Vue改变数组的方法 七种

       push pop shift unshift reverse sort spilice

   vue侦听器

       方法格式的侦听器

           watch:{

               name(newName,oldName){

               }

           }

           缺点：首次进入浏览器，无法立即触发第一次。侦听对象，对象数据发生变化，不会触发。

       对象格式的侦听器

           优点：可以通过immediate属性，控制侦听器自动触发一次（默认是false）。可以 通过deep属性，控制侦听器深度监听到对象中每一个属性的变化

           watch:{

               obj：{

                   handler(newval){

                   },

                   immediate:true,

                   deep:true

               }

           }

       如果想要侦听对象里某一个子属性的变化，可以通过”单引号进行包裹

           watch:{

               ‘obj.name'(newval,oldval){

               }

           }

       侦听器的特点

           它的命名不能随意，必须和你想侦听的属性名称完全一致

           它不能手动调用，它是自动触发

           不需要有任何返回值

           它可以侦听异步操作中数据的变化

   computed/watch/filter的区别

       computed当页面中需要使用大量的表达式处理数据时

       watch数据变化时执行异步或开销较大的操作时

       filter与computed的主要区别在于它可以当做函数使用

       computed 对于其中变量的依赖是多个的 watch 的依赖则是单个的

   vue前端权限控制

       接口权限

           接口权限目前一般采用jwt的形式来验证，没有通过的话一般返回401，跳转到登录页面重新进行登录

           登录完拿到token，将token存起来，通过axios请求拦截器进行拦截，每次请求的时候头部携带token

           axios.interceptors.request.use(config => {

               config.headers[‘token’] = cookie.get(‘token’)

               return config

           })

           axios.interceptors.response.use(res=>{},{response}=>{

               if (response.data.code === 40099 || response.data.code === 40098) { //token过期或者错误

                   router.push(‘/login’)

               }

           })