searchusermenu
  • 发布文章
  • 消息中心
点赞
收藏
评论
分享
原创

Vue2 常用概念

2023-10-30 09:54:11
5
0

# Vue2
## 插值、指令、动态属性、表达式、v-html
1. 插值:{{ data }}
2. 指令 & 动态属性:例子(:id="xxx")
3. 表达式:可以用于赋值,写在{{}}里面
4. v-html 替换绑定v-html的元素的所有子元素

## 计算属性
1. 计算属性有缓存,只在与其关联的数据更新时重新计算
2. 计算属性可以设置get和set函数。如果计算属性用于双向绑定,必须使用set来定义赋值操作

## watch监听器
1. 监听数据变化,可以拿到 newValue 和 oldValue 
2. 如果监听的是引用类型,需要添加属性deep: true, 并且提供handler函数
3. watch监听引用类型拿到的newValue和oldValue都是同一个~

## 动态绑定类名和样式
```html
<!-- class -->
<div class="class_1" :class="{ "className": isActive }">
<div class="class_1" :class="['className1', 'className2']">
<!-- style -->
<div class="class_1" :style="styleObj">
```
1. 类:
    1. 对象语法:是否添加该类,取决于该类名所对应的值,即isActive是否为true
    2. 数组语法:是否添加该类,取决于数组内是否有该类名
2. 样式: 在styleObj中定义样式属性

## v-if 和 v-show 的区别
1. v-if : 创建dom,销毁dom
2. v-show: 操作css即可

## v-for 列表循环

不推荐v-for和v-if一起使用,因为v-for的优先级比v-if高。所以会先去v-for渲染,然后再每一个去判断。

## 事件
1. vue事件对象的原型的构造函数是原生事件构造函数
2. vue根据我们在哪个元素上写了@click,就往哪个元素上绑定事件处理函数
3. 如果是多个参数,可以用$event传入

## 父子组件通信方式 之 props/$emit
1. 父组件中使用动态绑定属性传值
2. 子组件使用props属性接收
3. 子组件向父组件传值:this.$emit('add',...[arguments)
4. 父组件监听add事件@add="method"

## 兄弟组件通信方式
1. eventBus: 是一个Vue实例
2. eventBus.$emit('event', ...[arguments);
3. eventBus.$on('event', method);
4. 组件销毁的时候可以解绑事件监听,使用eventBus.$off('event', method);

## 父子组件生命周期执行顺序
1. created, mounted, beforeDestroyed
2. Vue实例创建时,父组件先创建,子组件先渲染
3. 在更新时,子组件先更新完,父组件才能更新完。但是是父组件先触发更新

## 什么是 nextTick
1. vue渲染是异步的,当我们更新数据时,vue不会马上去做渲染,而是在下一个tick的时候去做渲染
2. 如果需要准确获取vue更新后的结果的话,可以使用vue提供的api,vue.$nextTick(fn); 在fn中去获取需要的结果

## slot 插槽
1. 什么是插槽?预留一个位置,可以让我们插入任何内容
```html
<!-- app.vue -->
<ul-slot>
    <li-slot>123</li-slot>
    <li-slot>123</li-slot>
    <li-slot>123</li-slot>
</ul-slot>
<!-- ulSlot -->
<ul id='ul-slot'>
    <slot></slot>
</ul>
<!-- li-slot -->
<li id="li-slot">
    <slot></slot>
</li>
```
2. 子组件中slot标签的内容可以作为默认内容,如果没有内容传进插槽的话,就会显示默认内容

## 作用域插槽

```html
<!-- parent -->
<son-slot>
    <template v-slot:default="slotProps">
        {{ slotProps.user.age }}
    </template>
</son-slot>

<!-- son -->
<!-- 注:user是子组件中的数据 -->
<slot :user=user>{{ user.name }}</slot>
```

## 具名插槽
```html
<!-- App -->
<app>
    <layout>
        <template v-slot:header>
            <h1>header</h1>
        </template>

        <p>main content</p>
        <p>main content</p>

        <template v-slot:footer>
            <h1>footer</h1>
        </template>
    </layout>
</app>

<!-- layout -->

<div>
    <header>
        <slot name="header"></slot>
    </header>
    <main>
        <slot></slot>
    </main>
    <footer>
        <slot name="footer"></slot>
    </footer>
</div>
```

`个人理解:slot有点像是说a组件指定了b组件里面的一些内容,前提是b组件需要提供一些接口,这个接口就是slot标签`


## 动态组件
```html
<component type="xxx"></component>
<!-- 指定xxx可以动态决定当前是使用哪一个组件进行渲染 -->
```

## 异步组件
当前组件如果不需要使用的话,但是一并加载进来会很影响性能,所以这时候需要异步组件。
```js
// 语法:
components: {
    test: () => import('./components/test')
}
```

## keep-alive
把想要保存的组件用keep-alive标签包裹起来
```html
<keep-alive>
    <A></A>
    <B></B>
    <C></C>
</keep-alive>
<!-- 这样组件ABC就不会销毁了,会缓存其dom内容 -->
```

## mixin
```js
// mixin.js
// 抽离公共部分的逻辑
export default {
    data() {
        return {
            commonData: 123,
            commonData2: 234
        }
    },
    methods: {
        commonMethod1() {

        },
        commonMethod2() {

        }
    }
}

// vue
// 然后在vue中的mixin配置项配置一下
import mixin from './mixin';

export default {
    mixins: [mixin]
}
```

0条评论
0 / 1000
luluuuu
10文章数
0粉丝数
luluuuu
10 文章 | 0 粉丝
原创

Vue2 常用概念

2023-10-30 09:54:11
5
0

# Vue2
## 插值、指令、动态属性、表达式、v-html
1. 插值:{{ data }}
2. 指令 & 动态属性:例子(:id="xxx")
3. 表达式:可以用于赋值,写在{{}}里面
4. v-html 替换绑定v-html的元素的所有子元素

## 计算属性
1. 计算属性有缓存,只在与其关联的数据更新时重新计算
2. 计算属性可以设置get和set函数。如果计算属性用于双向绑定,必须使用set来定义赋值操作

## watch监听器
1. 监听数据变化,可以拿到 newValue 和 oldValue 
2. 如果监听的是引用类型,需要添加属性deep: true, 并且提供handler函数
3. watch监听引用类型拿到的newValue和oldValue都是同一个~

## 动态绑定类名和样式
```html
<!-- class -->
<div class="class_1" :class="{ "className": isActive }">
<div class="class_1" :class="['className1', 'className2']">
<!-- style -->
<div class="class_1" :style="styleObj">
```
1. 类:
    1. 对象语法:是否添加该类,取决于该类名所对应的值,即isActive是否为true
    2. 数组语法:是否添加该类,取决于数组内是否有该类名
2. 样式: 在styleObj中定义样式属性

## v-if 和 v-show 的区别
1. v-if : 创建dom,销毁dom
2. v-show: 操作css即可

## v-for 列表循环

不推荐v-for和v-if一起使用,因为v-for的优先级比v-if高。所以会先去v-for渲染,然后再每一个去判断。

## 事件
1. vue事件对象的原型的构造函数是原生事件构造函数
2. vue根据我们在哪个元素上写了@click,就往哪个元素上绑定事件处理函数
3. 如果是多个参数,可以用$event传入

## 父子组件通信方式 之 props/$emit
1. 父组件中使用动态绑定属性传值
2. 子组件使用props属性接收
3. 子组件向父组件传值:this.$emit('add',...[arguments)
4. 父组件监听add事件@add="method"

## 兄弟组件通信方式
1. eventBus: 是一个Vue实例
2. eventBus.$emit('event', ...[arguments);
3. eventBus.$on('event', method);
4. 组件销毁的时候可以解绑事件监听,使用eventBus.$off('event', method);

## 父子组件生命周期执行顺序
1. created, mounted, beforeDestroyed
2. Vue实例创建时,父组件先创建,子组件先渲染
3. 在更新时,子组件先更新完,父组件才能更新完。但是是父组件先触发更新

## 什么是 nextTick
1. vue渲染是异步的,当我们更新数据时,vue不会马上去做渲染,而是在下一个tick的时候去做渲染
2. 如果需要准确获取vue更新后的结果的话,可以使用vue提供的api,vue.$nextTick(fn); 在fn中去获取需要的结果

## slot 插槽
1. 什么是插槽?预留一个位置,可以让我们插入任何内容
```html
<!-- app.vue -->
<ul-slot>
    <li-slot>123</li-slot>
    <li-slot>123</li-slot>
    <li-slot>123</li-slot>
</ul-slot>
<!-- ulSlot -->
<ul id='ul-slot'>
    <slot></slot>
</ul>
<!-- li-slot -->
<li id="li-slot">
    <slot></slot>
</li>
```
2. 子组件中slot标签的内容可以作为默认内容,如果没有内容传进插槽的话,就会显示默认内容

## 作用域插槽

```html
<!-- parent -->
<son-slot>
    <template v-slot:default="slotProps">
        {{ slotProps.user.age }}
    </template>
</son-slot>

<!-- son -->
<!-- 注:user是子组件中的数据 -->
<slot :user=user>{{ user.name }}</slot>
```

## 具名插槽
```html
<!-- App -->
<app>
    <layout>
        <template v-slot:header>
            <h1>header</h1>
        </template>

        <p>main content</p>
        <p>main content</p>

        <template v-slot:footer>
            <h1>footer</h1>
        </template>
    </layout>
</app>

<!-- layout -->

<div>
    <header>
        <slot name="header"></slot>
    </header>
    <main>
        <slot></slot>
    </main>
    <footer>
        <slot name="footer"></slot>
    </footer>
</div>
```

`个人理解:slot有点像是说a组件指定了b组件里面的一些内容,前提是b组件需要提供一些接口,这个接口就是slot标签`


## 动态组件
```html
<component type="xxx"></component>
<!-- 指定xxx可以动态决定当前是使用哪一个组件进行渲染 -->
```

## 异步组件
当前组件如果不需要使用的话,但是一并加载进来会很影响性能,所以这时候需要异步组件。
```js
// 语法:
components: {
    test: () => import('./components/test')
}
```

## keep-alive
把想要保存的组件用keep-alive标签包裹起来
```html
<keep-alive>
    <A></A>
    <B></B>
    <C></C>
</keep-alive>
<!-- 这样组件ABC就不会销毁了,会缓存其dom内容 -->
```

## mixin
```js
// mixin.js
// 抽离公共部分的逻辑
export default {
    data() {
        return {
            commonData: 123,
            commonData2: 234
        }
    },
    methods: {
        commonMethod1() {

        },
        commonMethod2() {

        }
    }
}

// vue
// 然后在vue中的mixin配置项配置一下
import mixin from './mixin';

export default {
    mixins: [mixin]
}
```

文章来自个人专栏
javascript
7 文章 | 1 订阅
0条评论
0 / 1000
请输入你的评论
0
0