vue常见知识点（常见指令，双向数据绑定，路由跳转传参，组件间通信，路由守卫，vuex，混入mixin，插槽slot，跨域，封装请求，SEO，vue等单页面应用的优缺点）

---

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

指令	作用
v-on	绑定事件监听, 可简写为@
v-bind	单向绑定解析表达式, 可简写为 :xxx
v-model	双向数据绑定
v-html	将数据填充到标签中(能解析富文本)
v-text	将数据填充到标签中(不能解析富文本)
v-cloak	防止页面闪烁
v-for	遍历数组/对象/字符串
v-if/v-else	条件渲染（动态控制节点是否存存在）
v-show	条件渲染 (动态控制节点是否展示)

2.双向数据绑定的原理

双向数据绑定的原理:采用“数据劫持"结合“发布者订阅者"模式的方式，通过"Object.defineProperty()方法来劫持各个属性的setter ,getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
vue3中改为proxy代理,拦截对data任意属性的操作, 包括属性值的读写,、添加删除等 通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作

3、路由的跳转和传参

3-1.路由传参

函数跳转时用this.$router，获取参数时用this.$route，（router比route大）
1、path+query传参
query传参可以直接加"?"拼接，也可以通过对象的方式传参
获取参数用this.$route.query.参数名

//声明式
<router-link to="/detail?id=123&name='aa'">去详情</router-link>
<router-link :to="{path:'/detail',query:{id:222,name:'zs'}}">去详情</router-link>
//函数式
 todetail(){
        // this.$router.push({path:'/detail'});
        this.$router.push({path:'/detail',query:{id:123,name:'zs'}});
      },

2、name+params传参
pramas传参，必须传参数而且指定参数名
获取参数用this.$route.params

//声明式
<router-link :to="{name:'myname',params:{userid:3333,name:'zs'}}">去个人中心</router-link>
//函数式
todetail(){
        this.$router.push({name:'myname',pramas:{id:123,name:'zs'}});
      },
//配置路由
{
 // 指定参数
  path:'/myself/:userid&:name',
  component:myself,
  name:'myname'
}

3-2.路由跳转

1、声明式跳转

//path+query传参
<router-link to="/detail?id=123&name='zs'">去详情页传参</router-link> 
<router-link :to="{path:'/detail',query:{id:222,name:'zs'}}">去详情</router-link>
//name+params传参
<router-link :to="{name:'myname',params:{userid:3333,name:'zs'}}">去个人中心</router-link>、

2、函数式跳转
this.$router.push()方法

 <button @click="todetail">去详情页面</button>
methods: {
      todetail(){
        //path+query
        // this.$router.push({path:'/detail'});
        this.$router.push({path:'/detail',query:{id:123,name:'zs'}});
        //name+params
        this.$router.push({name:'myname',params:{userid:3333,name:'zs'}})
      },
}

4、组件间的通信方式

4-1.父传子

父组件在引用子组件的标签里利用自定义属性传值

//在父组件中
data: {
  	toSon:'传给子组件',
}
//子标签
<son :data="toSon"></son>

子组件通过props接收数据

//props和data同级
props:{
        //data:String,
        // 或者设置默认值
        data:{
          type:[Number,String],
          default:"默认值"
        },
      },

4-2.子传父

在父组件中自定义事件接收数据

//在父组件中
methods: {
  	formSon(data){
  		console.log(data)  //data即传来的数据
  	}
}
//子标签
<son @fromSon1="fromSon"></son>

子组件通过$emit传递数据

//可以在生命周期中触发或者设置点击事件触发
created(){
	this.$emit('fromSon1',"传到父组件");
}

4-3.vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储，管理应用中所有组件的状态。
获取到全局状态：this.$store.state.变量名

4-4.存入缓存

localStorage和sessionStorage

1、localStorage存储的数据会一直在浏览器本地存储，除非手动清除
2、sessionStorage存储的数据在浏览器关闭后就会清除。
3、localStorage只能存储字符串，任何格式的数据在存储的时候都会被自动转为字符串，所以读取的时候，需要进行类型的转换。
4、保存数据：localStorage.setItem(key,value)
读取数据：localStorage.getItem(key)
删除单个数据：localStorage.removeItem(key)
删除所有数据：localStorage.clear()

4-5.ref

ref可以获取DOM元素也可以获取到组件实例
给组件或者dom元素加上ref属性
利用this.$refs.属性值获取元素，并且可以使用元素的属性和方法

4-6.事件总线

事件总线多用于兄弟组件的通信
uni.$on(eventName,callback)监听事件uni.$emit(eventName,OBJECT)来触发全局的自定事件
uni.$off([eventName, callback])移出监听

5、对路由守卫的理解

• 路由守卫就是在路由跳转之前校验是否有权限，有权限就通过，反之就执行其他操作。例如登录鉴权（有些功能只有在登录状态下才可以进行，没有登录可能会跳转到登录页面）。
• 路由守卫分为全局前置守卫、路由独享守卫
• router.beforeEach()注册全局前置守卫
• 路由配置上通过beforeEnter可以定义路由独享守卫
  必须确保 next 函数在任何给定的导航守卫中都被严格调用一次但可以出现多于一次

//全局
router.beforeEach((to, from, next) => {
    console.log(to) //to 跳转后的页面
    console.log(from)//from 跳转前的页面
    console.log(next)
})
//next 是函数,直接调用 next() 允许跳转
//next(false) 不允许跳转
//next('/index') 代表要跳转到首页
//独享
routes: [
    {
      path: '/index',
      component: index,
      beforeEnter: (to, from, next) => {
      }
    }
  ]

6、对vuex的理解

vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
使用vuex进行统一的状态管理，可以解决不同组件共享数据的问题以及不同视图需要变更同一状态的问题。

vuex的使用
1、安装引入 npm install vuex --save
2、注册到vue中

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

3、实例化vuex的store

const store = new Vuex.Store({
    state: {
        count: 0,
        title:'vuex中的title'
    },
    mutations: {
        increment(state,count) {
            state.count=count
        }
    }
})

4、挂载在vue实例上

new Vue({
    store
})

5、在组件中就可以通过this.$store对vuex进行操作。
vuex的核心模块

1. state：状态的初始化，通过this.$store.state获取变量
2. getters：初加工，通过this.$store.getters获取变量
3. mutations：修改state中的值，通过this.$store.commit调用
4. actions：可以包含异步操作，修改state数据，不可以直接修改，需要触发mutations修改，actions通过this.$store.dispatch调用。
5. modules：模块化。状态会集中在一起，导致难以维护，可以通过module对store进行拆分，每个模块都有自己的state、mutations等。

7、对混入(mixin)的理解

• mixin混入是一种vue组件分发服用功能的一种方式。将组件公共部分可以封装成一个mixin对象，在需要的组件可以引入该对象。
• 混入对象可以包含组件的任意选项，例如生命周期、数据、方法等

注意事项：

1. 数据：混入对象的data数据、methods方法、compoments的优先级低于组件本身的，组件本身的会覆盖混入的。（组件生效）
2. 钩子函数：混入对象的created、mounted生命周期的优先级高于组件本身的，但是会合并程一个数组，混入的钩子函数先调用，组件本身的后调用。（都生效）
3. 对象：例如methods,components等。会被合并为一个对象，对象键名冲突时，组件覆盖混入的。（组件生效）

8、对插槽(slot)的理解

• 插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码。
• 插槽分为默认插槽和具名插槽

默认插槽 <slot>

//子组件
  <template id="mycontent">
    <div>
      <!-- 默认插槽 -->
      <slot></slot> 
      <p>文本内容</p>
      <p>文本段落</p>
    </div>
  </template>
//父组件
 <mycontent>
   <!-- 默认插槽 -->
   <template>
     <h1>我是默认插槽</h1>
   </template>
 </mycontent>

具名插槽 <slot name=“header”></slot>
父组件中需要利用v-slot:header指定是哪个插槽

//子组件
  <template id="mycontent">
    <div>
      <div><slot name="header"></slot></div>
      <p>文本内容</p>
      <p>文本段落</p>
      <div><slot name="footer"></slot></div>
    </div>
  </template>
//父组件
  <div id='app'>
    <mycontent>
      <!-- 注意事项：不是=号 -->
      <template v-slot:header>
        <h1>我是头部标题</h1>
      </template>
      <template v-slot:footer>
        <h1>我是尾部</h1>
      </template>
    </mycontent>
  </div>

9、跨域及解决方法

跨域：基于浏览器的同源策略，当浏览器和服务器的协议、主机、端口号有任何一个不一致时会产生跨域。
解决：

1. 后台不做限制，放开所有请求。优点：方便 缺点：不安全
2. 配置代理，proxy代理不受同源策略的限制。
3. JSONP：原理是利用了script标签不受同源策略限制，需要后端配合

10、对封装请求的心得

封装请求会有以下好处：

1. 提高代码的复用性
2. 提高代码安全性
3. 便于修改增加可维护性
4. 简化外部调用，便于开发
5. 符合高内聚低耦合特性

11、SEO为搜索引擎，标签语义化

12、vue等单页面应用及其优缺点

单页Web应用（single page web application，SPA）

就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。

单页Web应用的优点

1、提供了更加吸引人的用户体验：具有桌面应用的即时性、网站的可移植性和可访问性。
2、单页应用的内容的改变不需要重新加载整个页面，web应用更具响应性和更令人着迷。
3、单页应用没有页面之间的切换，就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象
4、单页应用相对服务器压力小，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍。
5、良好的前后端分离。后端不再负责模板渲染、输出页面工作，后端API通用化，即同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端。

单页Web应用的缺点

1、首次加载耗时比较多。
2、SEO问题，不利于百度，360等搜索引擎收录。
3、容易造成Css命名冲突。
4、前进、后退、地址栏、书签等，都需要程序进行管理，页面的复杂度很高，需要一定的技能水平和开发成本高。