vue常用知识点总结

1. Vue常见的指令有哪些，有什么用

v-text：  会替换掉元素里的内容；

v-html： 可以渲染html界面；

v-clock： 防止界面闪烁；

v-bind： 界面元素属性值的绑定，简写为：；

v-on：   事件绑定，简写为@；

v-model：数据双向绑定；

v-for： 可用来遍历数组、对象、字符串，:key提高重排效率，要求是字符串或者数字， 且唯一；

v-if、v-else、v-else-if：判断条件删除或显示dom元素（只修改一次可以使用）；

v-show： 控制显示隐藏（频繁切换时使用）；

v-once： 只会执行一次渲染，当数据发生改变时，不会再变化；

2. 双向数据绑定的原理

原理：采用“数据劫持”结合“发布者-订阅者”模式的方式，通过“Object.defineProperty()”方法来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

定义：

数据劫持：指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。

发布—订阅模式：又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。

举个例子，售楼处卖房，那么售楼处要发布房型信息，那么它是发布者，中介关注房型，所以中介是订阅者，当售楼处发布消息之后或者房型信息更新之后，中介就会收到消息，去做某件事情，而这个事情就是去通知客户。这么做的好处是：客户不用关心房型，不用和任何一家售楼处保持紧密的联系，只需要与某个中介联系，但是他可以通过中介知道所有房型的变化。所有客户与售楼处是没有耦合关系的。

3. 路由的跳转和传参有哪几种方式

(1)路由跳转：

声明式：<router-link to="/index"></router-link>（注意加不加冒号的问题，如果是一个固 定的字符串的话不需要加冒号）

函数式：this.$router.push('/index')

(2)路由传参：

路由传参：分为path+query和name+params

声明式： <router-link :to="{path:'/index',query:{id:233}}"></router-link>

<router-link :to="{name:'home', params: {id:233}}"></router-link>

函数式： this.$router.push({path:'/index',query:{id:233}})

this.$router.push({name:'home', params: {id:233}})

4. 组件间的通讯方式有哪些

组件通讯方式有两种：父传子，子传父；

Vue中父传子：

<div id=’app’>

<son msg=’hello’></son>

<son></son>

</div>

子组件接收：

props:{

msg:{

type:[String,Number],

default:’hello world’,

}

       }

子组件：

       <template id=’son’>

  <div>{{msg}}</div>

       </template>

Vue中子传父：

父组件：

<template id=’father’>

<son @fromson=’fromson’></son>

</template>

子组件：

<template id=’son’>

<div>

<button @click=’tofather’>点我子传父</button>

</div>

</template>

子组件中触发：

methods：{
        tofather(){

this.$emit(‘fromson’,’111’)

}

}

父组件接收子组件参数：

methods：{
       fromson(data){

console.log(data)

}

缓存：localStorage和sessionStorage

可以将数据存储到本地缓存中，在需要的时候从缓存中取出即可。

localStorage存储的数据会一直在浏览器本地存储，除非手动清除；

sessionStorage存储的数据在浏览器关闭后就会清除；

localStorage只能存储字符串，任何格式的数据在存储的时候都会被自动转为字符串，所以读取的时候，需要进行类型的转换；

Vuex：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储，管理应用中所有组件的状态。

作用：进行统一的状态管理，解决不同组件共享数据的问题。

不同视图需要变更同一状态的问题

Ref：利用ref函数获取组件中的标签元素，并且可以使用该标签元素的属性和方法

事件总线：

事件总线像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件。事件总线多用于兄弟组件的通信。

触发事件

在uni中可以通过uni.$emit(eventName,OBJECT)来触发全局的自定事件。附加参数都会传给监听器回调。

uni.$emit('update',{msg:'页面更新'})

监听事件

uni.$on(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数

只监听一次

uni.$once(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。

移除监听

uni.$off([eventName, callback])

5. 谈一谈对路由守卫的理解（谈理解，一般就是总分总，它是什么，用在哪，有什么用，

怎么用，有什么注意事项，再结合项目说明更好）

路由守卫是路由在跳转前、后过程中的一些钩子函数，这些函数可以让你操作一些其他的事，在后台管理中设置权限时经常看到，在实现路由跳转前校验是否有权限，有权限就可以通过，反之就会被执行其他操作，如返回首页。

“导航”表示路由正在发生改变。正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

路由守卫分为：全局守卫，组件守卫，路由独享；

全局守卫：所有的路由切换都会执行，一般写在路由配置文件中

router.beforeEach(fn) :to\from\next();

router.afterEach(fn):to\from;

router.beforeResolve(fn):to\from\next();

组件守卫：

beforeRouteEnter(fn):to\from\next() //在渲染该组件的对应路由被confirm前调用，不能获取组件实例，因此无法this;

beforeRouteUpdate(fn):to\from\next();

beforeRouteLeave(fn):to\from\next();

路由独享守卫：一般写在路由配置中

beforeEnter(fn):to\from\next();

实例：

可以使用 router.beforeEach 注册一个全局前置守卫。

to：跳转后的页面；from：跳转前的页面；

next是一个方法，next() 直接调用不阻止允许跳转,next(‘/index’)跳转到首页，next(false)不允许跳转；

router.beforeEach（（to，from，next）=>{

If(to.meta.needLogin){ //判断是否需要登录

getUserInfo().then(res=>{

If(res.code == 0){  //判断是否已经登录

next()

}else{

alert(“先登录”)

next(“/”)

}

}else{

next()

}

return false  //返回false取消导航

}）

meta：路由元数据

{

path：’mine’,

component:Mine,

meta:{

needLogin:true

}

}

注意：确保next函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错

路由独享的守卫：

可以在路由配置上直接定义 beforeEnter 守卫，这些守卫与全局前置守卫的方法参数一样。

const router = new VueRouter({

 routes: [

     {

      path: '/foo',

       component: Foo,

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

         // ...

       }

     }

 ]

})

6. 谈一谈对Vuex的理解

vuex是什么：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储，管理应用中所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

使用vuex的原因：

进行统一的状态管理，解决不同组件共享数据的问题。

不同视图需要变更同一状态的问题。

使用vuex之后，状态变化更加清晰。

五个模块：

state: 定义全局状态

state:{

Price:20

isLogin:false,

userInfo:{},

}

组件中通过this.$store.state.xxx获取state的值；

getters: 对全局状态state中的数据进行加工(计算)，并不会改变状态值

getters:{
     fee(state){
          return state.price*0.5
          }
     }

组件中通过this.$store.getters.xxx获取值；

mutations: 同步修改全局状态

mutations:{
        changeLogin(state,payload){

        state.isLogin = payload.isLogin;

         state.userInfo = payload.userInfo;

    }

}

组件中:this.$store.commit(事件类型,数据)

如：this.$store.commit('changeLogin',{isLogin:true,userInfo:res.data.data})

actions: 异步修改全局状态，一般用于请求接口

action不能直接修改state，如果想修改state的话，需要触发mutation

actions: {

        // 通过context（上下文环境）可以触发mutation，触发action，获取state、getter 等操作，第                二个参数就是我们传递过来的参数

        changeTitle(context,payload) {

             setTimeout(() => {

                 context.commit('changeLogin',payload)

             }, 1000);

        }

   }

this.$store.dispatch('action名字','参数')

modules: 将store模块化

const moduleA = {

       state: { ... },

       mutations: { ... },

       actions: { ... },

       getters: { ... }
    
}

const moduleB = {

      state: { ... },

      mutations: { ... },

      actions: { ... }

}

const store = new Vuex.Store({

      modules: {

         a: moduleA,

         b: moduleB

     }

})

7. 谈一谈对混入的理解

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

混入：分为全局混入和局部混入 局部混入只可以在当前组件内部使用 全局混入可以在任何组件中进行使用。

局部混入：多个组件引入局部混入时,一个组件中改动了mixin中的数据,另一个引入了mixin的组件中的属性和方法是不会改变的。

全局混入：在任何组件中都可以使用 需要挂载在顶级对象上

import {mixins} from "./mixins"//先引入封装的混入代码文件

Vue.mixin(mixins)//将引入的文件属性方法挂载到Vue的顶级对象上不同的组件混入是互相独立的

选项合并：当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

组件和混入的属性方法合并优先级：

data数据冲突：mixin中的data数据和组件中的data数据冲突时,组件中的data数据会覆盖mixin中的数据；

生命周期函数：这种不算冲突,生命周期函数的名称是固定的,先执行混入里的代码再执行组件中的代码；

方法名冲突：在组件中调用该方法,调用的是组件中的方法；

优点：

提高代码复用性

只需要修改一个地方就可以

缺点：

命名冲突

滥用的话后期很难维护,排查问题不方便

8. 谈一谈对插槽的理解

插槽是子组件中提供给父组件使用的一个占位符，用<slot></slot>表示。父组件可以在这个占位符中填充任何模板代码，如HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

默认插槽：只能有一个

如：

<div id="app">
     <course>免费</course>
</div>

<template id="course">

     <div>

       <h2><slot></slot>课程</h2>

     </div>

</template>

结果为：免费课程

具名插槽：给插槽取个名字，一个组件可以放多个插槽，而且可以放不同地方，父组件 填充内容时，可以根据这个名字把内容填充到对应插槽中。不影响默认插槽的使用。

如：

<div id="app">

     <course>

       <template v-slot:header>免费</template>

     </course>

</div>

<template id="course">

   <div>

      <h2><slot name="header"></slot>课程</h2>

    </div>

</template>

结果为：免费课程

9. 什么是跨域，如何解决

同源策略：浏览器的一个安全协议，协议主机端口要保持一致，只要有一个不一样，就是跨   域请求。

同源策略就是一种约定，它是浏览器最核心也是最基本的安全功能。同源策略会阻止一个域的JavaScript脚本和另一个域的内容进行交互，是用于隔离潜在恶意文件的关键安全机制。当一个请求url的协议、域名、端口三者之间任意一个与前面页面url不同即为跨域。

解决跨域：

后台直接不做限制，放开所有请求。优点就是方便，缺点就是不安全；

JSONP原理，利用script标签不受同源策略，需要后端配合；

配置代理；

配置代理：

devServer：{

    proxy：{

        '/course-api'：{   //代理名称

            target：'https://course.myhope365.com/api',  //后台接口域名

            changeOrign：true,  //是否跨域

            pathRewrite：{

                '^/course-api'：''  //路径重写
    
            }

        },
        
        //第二种写法

        '/api'：{   //代理名称

            target：’https://course.myhope365.com’,  //后台接口域名

            changeOrign：true  //是否跨域

        }

    }
}

10. 谈一谈封装请求的心得

可以对请求进行统一化的管理，易于维护，同时，什么地方需要，什么地方导入就可以使用，对开发人员来说十分简便，此外，可以对请求开始前及过程中进行预处理，提高了请求的效率。

axios封装的好处：统一处理，提高效率，便于维护。
不用再挂载在Vue实例的原型上，降低了耦合度，两者互不相干了，   其中的任何一个出现问题，另一个都能正常运作。