vue 知识点合集

yi呀一呀哟
120 阅读3分钟

1、v-for 和 v-if 为什么不建议一起使用

在vue2 中 v-for 的优先级高于v-if , 如果将两者放在一起，会先执行v-for循环列表，在执行v-if去判断，造成性能浪费。（可在计算属性中过滤v-if的条件，在循环过滤好的数据 ）

在vue3 中 v-if 的优先级高于v-for

vue2:

<div class='hello'>
 <div v-for="item in arr" :key="item.id" v-if="iten.isshow">
  <h3>{{ item.name }}<h3>
 </div>
</div>
</template>
<script>
export default {
 name:"Hellouorld",
 data(){
  return{ 
   arr:[
      { id: 1,name:“张三",isShow: true } ,
      { id: 2,name:“李四",isShow: false },
      { id: 3,name:"王五",isShow: false },
      { id: 4,name:“赵六",isShow: true }
    ],
  };
},
computed:{
    filterArr(){
      return this.arr.filter(item=>{
        return item.isShow
      })
    }
};
</script>

2、v-for 中的key 的作用

key 对节点进行唯一标识(建议使用不可变的，不建议使用index) 作用：（ 和diff算法有关，使 diff 算法正确识别节点 ）

快速查到节点 , 减少流染次数,提升流染性能,高效的更新虚拟DOM

3、v-show 和 v-if 的区别

用法： 控制元素在页面上是否显示

  • v-if ：是组件真正的渲染和销毁，控制元素的添加和删除，dom节点会被删除
  • v-show ：通过控制css 的display属性来控制元素的显示和隐藏，dom元素不会消失，只是被隐藏了

运用：

  • v-if 常用于一次性改变，有更高的切换消耗
  • v-show 常用与频繁切换转态，有更高的初始渲染消耗。

4、vue 的常用指令

  • v-html 解析富文本，后面接string类型
  • v-once 元素和组件只会渲染一次，不需要接表达式
  • v-bind 属性动态改变，绑定一个或多个属性值，向另一个组件传递props值
  • v-on 绑定事件监听
  • v-for 循环遍历列表
  • v-if 条件渲染指令
  • v-show 条件渲染指令
  • v-model 双向绑定数据，实现表单或者数据的双向绑定
  • v-else
  • v-else-if

5、vue 的生命周期

/创建前
beforeCreate(){ //组件实例被创建之前:执行一些打始化任务
    console.log(" beforeCreate该触发了"):
},
// 创建后
created(){ //组件实例已经完全创建,常用于异步获取数据
    console.log(" created被触发了");
},
//载入前
beforeMount(){//组件未执行渲染,dom还没创建
    console.log( " beforeount被触发了");
},
//载入后, 
mounted(){ //初始化结束,dom已经创建,渲染完成,用于获取访问的数据,dom元素
    console.log( " mounted愤触发了);
},
// 更新前
beforeupdate(){ //组件数据发生变化之前,获取更新的各种状态
    console.log(" beforeUpdate该触发了")
),
// 更新后
updated(){ //组件数据更新之后
    console.log(" updated被触发了");
},
// 销毁前
beforeDestro(){ //组件实例销型之前,比如清除定时器,解绑事件等等
    console.log(" beforeDestroy被触发了")
},
// 销毁后
destroyed(){ //组件实例销码之后,
    console.iog(" destroyeG度触发了");
}

6、vue 中computed、watch、methods 的区别

  • computed：计算属性，基于他们的响应式依赖进行缓存，只有在相关的依赖发生改变时才会重新计算。
  • watch: 侦听器，用于观察和监听页面上的vue实例的变化，如果数据变化的同时进行异步操作，或者比较大的开销。
  • methods: 给vue定义方法，只要发生重新渲染，methods调用总是会被执行
<tenplate>
<div class="hello">
  <p>{{ message }} </P>
  <p>{{ message.split("").reverse().join("")}}</P>
  <p>{{ reverMsg() }}</P>
  <p>{{ reverMsg() }}</P>
  <p>{{ reverseNessage }}</p>
  <P>{{ reverseMessage }}</p>
  <p> 年龄:{{age}}</p>
  <button @click="addAge"> 增加年龄 </button>
 </div>
</template>

<script>
export default {
 name:"Helloworld",
 data(){
   return {
     message:"helloworld",
     age: 18,
   };
 },
methods:{
  reverMsg: function (){
    console.log(1);
    return this.message.split(").reverse(.join(");
  },
  addAge:function(){
    this.age++
  }
),
computed:{
  reverseMessage: function (){
      console.log(2);
      return this.message.split("").reverse(.join("")
  },
},
watch: {
    age:function(newValue,oldValue){
        console.log(newValue)
        console.log(oldValue)
    }
}

7、vue 中 ref 的作用

  1. 可以获取页面的 dom 元素

image.png

  1. 获取子组件的对象

子组件： image.png

父组件： image.png

8、vue 中如何对对象进行深入监听

<template>
<div class-"hello">
  <p>年龄:{{age})/p>
  <button @click="age++">增加年龄</button>
  <p>名字:{{ person.name }}</p>
  <button @click="person.name='李四'">更改名字</button>
</div>
</template>

<script>
export default {
  nane:"Helloworld",
  data(){
     return {
       age: 18,
       person:{
         nane:“张三”
       }
     };
},
watch:{
  age:function(newvalue,oldvalue){
       console.log(newvalue);
  }
//普通监听
person:function(newvalue){ 
     console.log(nealue); //不会打印，普通监听对象监听不到
  }
  
//深度监听  监听整个对象
person:{
    handler:function(newValue,oldValue){
        console.log(newValue);
    }
    deep:true //代表是否深度监听，默认false，监听器会一层层的向下遍历，给对象每一个属性添加一个监听器
}

//深度监听 优化 只监听对象的某个属性
"person.name" :{
    handler:function(newValue,oldValue){
        console.log(newValue);
    }
    deep:true //代表是否深度监听，默认false，监听器会一层层的向下遍历，给对象每一个属性添加一个监听器
}

9、vue 中常用的修饰符

  • .stop: 取消事件冒泡 v-on的常用修饰符
  • .prevent: 取消默认事件 v-on的常用修饰符
  • .native: 监听自定义组件根元素的原生事件
  • .once：只触发一次回调
  • .lazy: 让数据在失去焦点或者回车的时候在更新
  • .number: 将输入框中的类型转为数字类型、
  • .trim: 去除输入框中首尾的空格

image.png

10、vue 中过滤器的使用

  • 用于一些常见的文本格式化
  • 过油器可以在不改变原始数据,只是对数据进行加工处理并且返回过滤后的数据,再进行调用处理

1、局部过滤器

// 局部过滤器
<template>
  <div class="hello">
    <ul>
      <li v-for="item in list" :key="item.id">
          <span>名字:{{item.name}}</span>
          <span>性别:{{item.sex | sexFilter}}</span>
      </li>
    </ul>
  /div>
</template>

<script>
export default {
  name:"Helloworld",
  data(){
    return {
      list:[
        {id:1,name:"张三”,sex:0},
        {id:2,name:"李四",sex:1},
        {id:3,name:"王五",sex:1},
        {id:4,name:"赵六",sex:0},
        {id:5,name:"田七",sex:1}
      ]
   };
 },
filters:{//过滤器
  sexFilter:function(value){
    if(value===0){
        return "男"
    }else{
        return “女”
    }
  }
}
</script>

2、全局过滤器

在main.js文件中

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
vue.config. productioaTip = faise
// 全局过滤器
// Vue.fiiter(过滤器",对应的过滤器函数)
Vue.filter( "sexFilter, function (value){
    if(value === 0 ){
        return "男"
    }else{
        return "女”
    }
new vue({
    router,
    store,
    render: h => h(App)
    }).$mount( "#app")

11、vue 中计算属性的特性及应用

  • computed计算属性：是基于他们的依赖进行缓存，只要在他相关的依赖发生改变的时候才会重新求值
  • 应用： 基于template里面的{{}}计算，处理props的传值
<template>
  <div class="hello">
      <p>{{message}}</<p>
      <p>{{message}}</<p>
      <p>{{revermsg}}</<p>
      <p>{{revermsg}}</<p>
  /div>
</template>

<script>
export default {
  name:"Helloworld",
  data(){
    return {  
      message:'Helloworld'  
    };
  },
  computed:{
     revermsg:function(){ // 只会执行一次
         console.log(2222);
         return this.message.split("").reverse().join("")
      }
  },
  methods:{
   reverseMessage: function (){ //调用几次执行几次
       console.log(1111);
        return this.message.splift("").reverse().join("")
    },
  },
}

</script>

12、vue中哪些数组方法可以直接对数组修改实现试图更新

push / pop / splice / rewense / shift / unshift / sort

  • 利用索引值设置数组的元素,直接修改数组的长度,都不可以触发视图更新
methods: {
  //添加
  add: function (){
     this.arr[4]={id:5,name:"田七"}
     console.1og(this.arr); //不能更新视图
     this.arr.push({id:5,name:"田七"}) //可以更新视图
  }，
  //删除
  del:function(){
    this.arr.length=3;
    console.log(this.arr);//不能更新视图
    this.arr.pop()//可以更新视图
  },
  //清空
  rem: function (){
    this.arr.length=O;
    console.log(this.arr);//不能更新视图
    this.arr.splice(0,this.arr.length)//可以更新视图
  },
  //翻转
  rev: function (){
    var t;
    for(var i=0;i<this.arr.length/2;i++){
        t=this.arr[i];
        this.arr[i]=this.arr[this.arr.length-i-1];
        this.arr[this.arr.length-i-1]=t
    } 
    console.1og(this.arr);//不能更新视图
    this.arr.reverse() //可以更新视图
    },
  },
};

13、vue 中如何使用自定义指令

指令：v-bind ,v-if ,v-for ,v-model ...不同的指令实现不同的功能

局部注册：

image.png

全局注册： 在main.js中

image.png

14、什么是 $nextTick()

  • 理解： 是将 回调函数 延迟在下一次 dom 更新数据之后调用
  • vue是异步渲染的框架，数据更新之后，dom 是不会立刻渲染的，$nextTick会在dom渲染之后被触发，用来获取最新的dom节点（获取更新后的dom） 保证用户定义的逻辑在更新之后执行
  • 使用场景：
    1. 在生命周期函数created中进行dom操作,一定要放到hextTick函数中执 行
    2. 在数据变化后要执行某个操作，而这个操作需要使用随数据变化而变化的dom结构,这个操作需要放到nextTick中
this.$nextTick(()=>{
  this.messege = this.$refs.msg.innerHITHL;;
})

15、父子组件之间的传值

16、双向数据绑定的v-model实现原理

  • 两个指令的结合：v-bind v-on
  • input事件,当输入框的内容发生改变,触发事件,拿到事件对象 -双向数据绑定的核心方法：0bject.defineProperty,来实现对属性的劫持，达到监听数据的目的
<template>
 <div class="hello">
   <input type="text" v-bind:value="message v-on:innput="valueChange">
   <input type="text" v-model="message">
   <p>{{ message }}</p>
    </div>
</template>

<script>
export default {
  name:"Helloworld",
  data{
     return{
        message:"你好a"
     },
  },
  methods:{
     valueChange:function(){
         console.log(e)
         this.message = e.target.value
     }
  }
}
</script>

17、

avatar
文章
阅读
粉丝