vue基本知识点

Posted 2022-01-16 peigaga

Vue
尤雨溪

渐进式的javascript框架

MVVM框架
M：model层 数据的增删改查
V：view层 视图 类似与html一样的模板
VM:viewModel model和view的一个映射层

优点：
数据驱动视图

回流和重绘
简单的来说页面的排版布局发生了改变就是回流
简单来说对一个元素进行样式操作不会导致页面布局发生改变重绘

回流一定会发生重绘
重绘不一定发生回流

vue常用的指令
v-text
v-html
v-bind :
v-on @ .stop .prev .enter .keyCode值 $event
v-model form表单 .number
Object.defineProperty
Proxy
v-for

 

v-show
v-if
区别：
前者操作元素的display属性 初次渲染的开销较大
后者操作元素的创建和销毁 开销较大

 

使用场景：
v-else-if
v-else
v-pre
v-cloak
v-once
v-slot 插槽

自定义指令
全局注册
Vue.directive()
局部注册
VUE(

)

过滤器
Vue.filter()

组件
Vue.component()

watch
属性监听
基于Vue的依赖，当依赖的属性发生了改变的时候，那么就会自动触发相对应的方法进行数据的处理
如果监听对象的时候只会监听对的引用地址是否发生了改变 具体的值是不会进行监听的
如果需要监听对象值的变化 handler函数 deep:true
无法监听数据(特殊情况)的变化 this.arr[0] = 200; this.arr.length = 0
在监听的函数中会接收到2个值 一个新值和一个旧值
$set() 给一个响应式对应添加一个响应式属性

 

特点：
一个数据影响多个数据

computed
属性计算
基于Vue的依赖，当依赖的属性发生了改变的时候，那么就会自动触发相对应的方法进行数据的处理
数据的缓存

特点
一个数据受多个数据的影响

 

生命周期
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
activated 活跃状态
deactivated 缓存状态

动态组件
通过同一个挂载点进行动态切换组件的变化
<component></coponent> is

<keep-alive></keep-alive> (***)

属性：
include
exclude
max

Vue动画
当前的元素必须遵循2个特点
1、必须经历显示隐藏
2、需要执行动画的元素 外层必须加一个<tranisition></tranisition>

name：动画的名称

name-enter
name-enter-active
name-enter-to

name-leave
name-leave-active
name-leave-to

<tranisition
enter-class
enter-active-class
enter-to-class
。。。
></tranisition>

 

组件传值
父传子
自定义属性
props:[]
type default required

子传父
通过自定义方法 触发通过this.$emit

通过插槽作用域

非父子
公共的vue实例对象
EventBus
手动封装$on $emit $off 事件订阅
Vuex

为了使组件更加的灵活

data为什么在组件中是一个函数而不是一个对象?

什么是单项数据流？

插槽
slot

默认名字是default

如果需要命令的时候 v-slot:名称

作用域插槽：
v-slot:名称 = "接收的值"
<Banner>
<template v-slot>
<p>111</p>
</template>
</Banner>

vue实例身上的方法
$mount()
$destroy()
$foreUpdate

$on
$emit
$off
$once

1、什么叫回流和重绘
2、虚拟DOM (虚拟DOM就是真实的JS对象，操作内存中的JS对象比操作真实的DOM速度要快)
3、模块化
4、虚拟DOM的key值有什么作用
5、Object.defineProperty
6、单页面开发与多页面开发的优缺点

 

博客
深入响应式原理

单文件组件？

 

查漏补缺
<keep-alive></keep-alive>
实例身上的方法
$extend
$mixin
路由
Vuex
axios
跨域
移动端