vue常见知识点总结一

1、vue常见的指令？

指令	作用	用法	注意事项
v-cloak	防止界面闪烁	[v-cloak]{ display: none;}
v-text	替换掉元素里的内容	v-text=“message”	不可以解析富文本
v-html	替换掉元素里的内容	v-html=“message”	可以解析富文本
v-bind	属性绑定	v-bind:type="type"或者 :type=“type”
v-on	事件绑定	v-on:click="log"或者@click=“log”
v-model	数据双向绑定	v-model:value=“value1” 或者:value=“value1”
v-for	循环渲染	遍历数组：v-for=“(item,index) in arr” 遍历对象： v-for=“(value,key,index) in obj” 遍历数字： v-for=“num in 10”	必须要绑定key值
v-if	元素显示隐藏	v-if=“flag”	通过删除添加元素控制显示与隐藏，可以搭配v-else和v-else-if，用于不频繁切换元素的场景
v-show	元素显示	v-show=“flag”	通过改变display属性控制显示与隐藏，用于频繁切换的场景

2、双向数据绑定的原理

双向数据绑定指的是view层和model层数据同步，当视图层数据发生改变的时候，模型层也会改变，反之亦然。

2-1.vue2的原理

通过数据劫持结合发布者订阅者模式实现
核心：利用Object.defineProperty()方法中的get和set方法对数据的读取和修改进行劫持。
Object.defineProperty()方法有三个参数：
obj：属性的对象。
prop：要定义或修改的属性。
descriptor：一个对象，包括get和set方法。

2-2.vue3的原理

通过Proxy(代理)的方式实现 拦截对data任意属性的操作, 包括属性值的读写,、添加删除等
通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作

/* 
    proxyUser是代理对象, user是被代理对象
    后面所有的操作都是通过代理对象来操作被代理对象内部属性
    */
const user = {
      name: "John",
      age: 12
    };
const proxyUser = new Proxy(user, {
	//获取
      get(target, prop) {
        console.log(prop)
        return Reflect.get(target, prop)
      },
	//修改
      set(target, prop, val) {
        console.log(prop, val)
        return Reflect.set(target, prop, val); // (2)
      },
      //删除
      deleteProperty (target, prop) {
        console.log(prop)
        return Reflect.deleteProperty(target, prop)
      }
    });
    // 读取
    console.log(proxyUser===user)
    console.log(proxyUser.name, proxyUser.age)
    // 修改
    proxyUser.name = 'bob'
    proxyUser.age = 13
    // 添加属性
    proxyUser.sex = '男'
    // 删除属性
    delete proxyUser.sex

3、路由的跳转和传参

3-1.传参

1、path+query传参
query传参可以直接加"?"拼接，也可以通过对象的方式传参
获取参数用this.$route.query.参数名

<router-link to="/detail?id=123&name='zs'">去详情</router-link>
<router-link :to="{path:'/detail',query:{id:222,name:'zs'}}">去详情</router-link>

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

<router-link :to="{name:'myname',params:{userid:3333,name:'zs'}}">去个人中心</router-link>

//配置路由
{
 // 指定参数
  path:'/myself/:userid&:name',
  component:myself,
  name:'myname'
}

3-2.跳转

1、声明式跳转

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

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

 <button @click="todetail">去详情页面</button>
methods: {
      todetail(){
        // 函数跳转$router，获取参数时用$route
        // this.$router.push({path:'/detail'});
        this.$router.push({path:'/detail',query:{id:123,name:'zs'}});
      },
}

4、组件间的通信方式

4-1.缓存

localStorage和sessionStorage

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

4-2.vuex

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

4-3.父传子

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

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

子组件通过props接收数据

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

4-4.子传父

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

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

子组件通过$emit传递数据

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

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可以定义路由独享守卫

to 跳转后的页面
from 跳转前的页面
next 是函数
直接调用 next() 允许跳转
next(false) 不允许跳转
next(‘/index’) 代表要跳转到首页

//全局
router.beforeEach((to, from, next) => {
    console.log(to)：
    console.log(from)
    console.log(next)
})
//独享
routes: [
    {
      path: '/index',
      component: index,
      beforeEnter: (to, from, next) => {
      }
    }
  ]

确保 next 函数在任何给定的导航守卫中都被严格调用一次但可以出现多于一次