【vue】一些有用的基础知识

Point酱

已于 2022-01-24 13:33:34 修改

阅读量467

点赞数

分类专栏：前端文章标签：前端 vue vue.js 面试

于 2022-01-24 10:54:09 首次发布

本文链接：https://blog.csdn.net/weixin_40571965/article/details/122662305

版权

前端专栏收录该内容

41 篇文章 0 订阅

订阅专栏

data()

是个函数并且返回一个对象

data之所以只一个函数，是因为一个组件可能会多处调用，而每一次调用就会执行data函数并返回新的数据对象，这样，可以避免多处调用之间的数据污染。

v-if and v-show

频繁或者大数据量显隐使用v-show，否则用v-if

v-if 通过控制dom元素的删除和生成来实现隐显，每一次显隐都会使组件重新跑一次生命周期，因为隐显决定了组件的生成和销毁。
v-show 通过控制dom元素的css样式来实现显隐，不会销毁。

computed and watch

一般情况下computed是多对一，watch是一对多

computed 是依赖已有的变量来计算一个目标变量，大多数情况都是多个变量凑在一起计算出一个变量，并且computed具有缓存机制。依赖值不变的情况下其会直接读取缓存进行复用，computed不能进行异步操作。
watch是监听某一个变量的变化，并执行相应的回调函数，通常是一个变量的变化决定多个变量的变化，watch可以进行异步操作

v-if and v-for

不建议一起使用

在Vue2中，v-for优先级是高于v-if的
```
<div v-for="item in [1, 2, 3, 4, 5, 6, 7]" v-if="item !== 3">
    {{item}}
</div>
```
上面的写法是v-for和v-if同时存在，会先把7个元素都遍历出来，然后再一个个判断是否为3，并把3给隐藏掉，这样的坏处就是，渲染了无用的3节点，增加无用的dom操作，建议使用computed来解决这个问题：

(之前我会用两个div解决这个问题……，很白痴)

<div v-for="item in list">
    {{item}}
</div>

computed() {
    list() {
        return [1, 2, 3, 4, 5, 6, 7].filter(item => item !== 3)
    }
  }

watch

监听

当我们监听一个基本数据类型时：

watch: {
    value () {
        // do something
    }
}

当我们监听一个引用数据类型时：

watch: {
    obj: {
       handler () { // 执行回调
           // do something
       },
       deep: true, // 是否进行深度监听
       immediate: true // 是否初始执行handler函数
    }
}

组件之间的传值方式有哪些？

组件化

父组件传值给子组件，子组件使用props进行接收
子组件传值给父组件，子组件使用$emit+事件对父组件进行传值
组件中可以使用$parent和$children获取到父组件实例和子组件实例，进而获取数据
使用$refs获取组件实例，进而获取数据

如何设置动态class，动态style？

根据状态返回不同的样式

动态class对象：<div :class="{ 'is-active': true, 'red': isRed }"></div>
动态class数组：<div :class="['is-active', isRed ? 'red' : '' ]"></div>
动态style对象：<div :style="{ color: textColor, fontSize: '18px' }"></div>
动态style数组：<div :style="[{ color: textColor, fontSize: '18px' }, { fontWeight: '300' }]"></div>