1.父组件访问子组件变量 this.$refs.usernameInput

给子组件添加ref属性然后,通过vm.$refs来调用子组件的methods中的方法或者获得data
父组件: 在子组件中加上ref即可通过this.$refs.ref.method调用


    2.vue双向数据绑定原理

    view更新data其实可以通过事件监听即可,比如input标签监听 'input' 事件就可以实现了。所以我们着重来分析下,当数据改变,如何更新视图的。数据更新视图的重点是如何知道数据变了,只要知道数据变了,那么接下去的事都好处理。如何知道数据变了,就是通过Object.defineProperty( )对属性设置一个set函数,当数据改变了就会来触发这个函数,所以我们只要将一些需要更新的方法放在这里面就可以实现data更新view了。视图view到data  :可以通过事件监听即可,比如input标签监听 'onchange' 事件就可以实现了data到view:通过Object.defineProperty( )对属性设置一个set函数,当数据改变了就会来触发这个函数,所以我们只要将一些需要更新的方法放在这个set函数里面就可以实现data更新view了。


      3.vue 组件通信

      1)父传递子父:自定义属性名 + 数据(要传递)=> :value="数据"子:props ["父组件上的自定义属性名“] =>进行数据接收1)	子传递父   子:this.$emit('自定义事件名称', 数据)  子组件标签上绑定@自定义事件名称='回调函数'    父:methods: {    回调函数() {       //逻辑处理  }   }1)	兄弟组件   通过中央通信 let  bus  =  new  Vue()          A:methods :{ 函数{bus.$emit(‘自定义事件名’,数据)}  发送          B:created (){bus.$on(‘A发送过来的自定义事件名’,函数)}  进行数据接受


        4.vue 生命周期

        vue实例从被创建到销毁的一系列过程就叫vue生命周期.也就是从开始创建、初始化数据、编译模版、挂载DOM→渲染、更新、渲染、卸载等一系列过程。BeforeCreate  实例创建之前调用Created       实例创建成功,此时data中的数据已经初始化beforeMount   挂载之前的状态Mounted      已经挂载的状态BeforeUpdate  数据更新前的状态Updated       数据更 新完成时的状态beforeDestory  在vue实例销毁之前调用,Destoryed     在vue实例销毁之后调用,vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。


          5.vue webpack打包项目修改哪些配置

          Config文件夹下面的index.js 设置里面的assetsPublicpath属性值为./ 如果图片太大的话,可以设置bulid文件夹下面的webpack.base.conf.js,设置图片的limit将它的值设大点, Utils.js添加publicpath为../../


            6.路由导航守卫

            全局钩子函数  : beforeEach()  每次每一个路由改变的时候都得执行一遍组件内的钩子函数   
            :to: (Route路由对象)  即将要进入的目标 路由对象     
            from: (Route路由对象)  当前导航正要离开的路由next: (Function函数)   一定要调用该方法来 
            resolve 这个钩子beforeRouteEnter 路由之前调用beforeRouteUpdate 复用时调用beforeRouteLeave  离开路由时调用


              7.state,getter,mutation,action,module,plugins 各自的用途,和用法

              State:{  count: 0  }  保存着所有的全局变量Getter: 对state中的数据派生出一些状态,例如对数据进行过滤。(可以认为是store中的计算属性),会对state中的变量进行过滤再保存,只要state中的变量发生了改变,它也会发生变化,不变化的时候,读的缓存。Mutation:更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。一条重要的原则就是要记住 mutation 必须是同步函数。Action: Action 类似于 mutation, 不同点在于,Action 提交的是 mutation,而不是直接变更状态。Action 可以包含任意异步操作,mutation只能是同步。有点不同的是Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。Module: //模块,可以写很多模块,最后都引入到一个文件。分散管理。生成实例的时候 都放在Store的modules中plugins:插件(Plugins)是用来拓展webpack功能的,它们会在整个构建过程中生效,执行相关的任务。


                8.vuex中使用persistedstate 插件进行长久储存 (需要自己写代码测试)

                安装   npm install vuex-persistedstate --savestore.js引入import VuexPersistence from "vuex-persist";创建一个对象:const vuexLocal = new VuexPersistence({    storage:window.localStorage})安装进vuex插件:export default new Vuex.Store({    state:{        info:{}    },    mutations:{        setInfo(state,info){            state.info=info;        }    },    plugins:[VuexPersistence()]})默认存储到localStorage想要存储到sessionStorage,配置如下import createPersistedState from "vuex-persistedstate"const store = new Vuex.Store({  plugins: [createPersistedState({      storage: window.sessionStorage  })]})


                  9.vue开发中遇到的问题

                  1、setInterval路由跳转继续运行并没有及时进行销毁
                   比如一些弹幕,走马灯文字,这类需要定时调用的,路由跳转之后,因为组件已经销毁了,但是setInterval还没有销毁,还在继续后台调用,控制台会不断报错,如果运算量大的话,无法及时清除,会导致严重的页面卡顿。
                  
                   解决方案:在组件生命周期beforeDestroy停止setInterval
                  
                  beforeDestory() {
                  
                      clearInterval(this.timer);
                  
                      MessageBox.close()               
                  
                  }
                  
                  2、vuejs循环插入图片 
                  在写循环的时候,写入如下代码:
                  
                  <div v-for="item in items"> 
                  
                      <img src="{{item.image}}"></div>
                  
                  此时在控制台会出现警告 
                  
                  [Vue Warn]: src=”{{item.image}}”: interpolation in “src” attribute will cause a 404 request. Use v-bind:src instead.这里意思是在“src”属性插值将导致404请求。使用v-bind:src代替。 
                  
                  所以替换成如下:
                  
                  <div v-for="item in items"> 
                  
                      <img v-bind:src="item.image">
                  
                  </div>
                  
                  这里需要主要,v-bind在写的时候不能再用{{}},
                  
                  3、组件的异步加载(按需加载组件)
                    在平时的demo中,你可能不会遇见这个需求,当页面很多,组件很多的时候,你会发现你的页面在首次加载的时候,异常的慢,这个是因为vue首次加载的时候把可能一开始看不见的组件也一次加载了,这个时候就需要对页面优化了,就需要异步组件了。如何去写异步组件呢,实际上很简单,只需要在你的路由index,js里加上require就可以了,像下面这样,这也是所谓的按需加载组件的实现原理。
                  
                  4、vuex组件中访问state报错
                    TypeError: Cannot read property ‘state’ of undefined”
                  
                    在组件中使用this.$store.state.test访问state的属性报错,是因为store的实例并未注入到所有的子组件,需修改main.js
                  
                    new Vue({
                  
                    el: '#app',
                  
                    store, //将store注入到子组件
                  
                    router,
                  
                    components: { App },
                  
                    template: '<App/>'
                  
                    })