Vue全部知识点整理

Posted 2021-12-04 老张在线敲代码

vue是什么

以数据驱动为视图的渐进式MVVM框架。

• 渐进式:循序渐进的使用vue,可选择性强,可以只使用vue的小功能,不必完全使用vue。不强制的意思。
  – mvvm：m:数据模型, v-view 视图:数据是双向绑定的,所有数据改变导致视图改变。

vue底层原理和vue描述

原理:Object.definProperty
vue:优点:虚拟dom,模块化开发,数据驱动,双向响应，浏览器统一兼容。
缺点：由于是js生成的虚拟dom,不利于seo爬虫爬取,首屏加载相对于静态页面慢。

data为什么是函数

因为组件的data会提升,而根实例上的data是对象,会导致一个合并。把data变成函数,以调用的方式来使,避免了覆盖和冲突

什么是虚拟dom

使用js算法动态生成的dom叫虚拟dom

diff算法和key的关系

同层对比,只要发现不一样的节点就会用新的dom替换旧的dom。正是因为diff算出来的虚拟dom没有跟踪标识,当一个循环出来的虚拟dom列表中
任意一个元素被修改,diff算法没办法找到它,只能重新循环渲染一份新的dom。加了key之后,每个dom有了自己唯一的标识,这样修改的时候可以
精准的找到并修改,从而节省了性能。所以,key的值必须唯一,而且不可以用随机数,用时间,不建议用下标

生命周期

4个阶段8个函数,其最大的问题是自动发起ajax请求问题,如果是在浏览器中运行,则应该在mounted发起,如果是服务端渲染,应该在created发起。

 //创建阶段
    beforeCreate(){
        //骨架屏来占位
        //日志上传
    },
    created(){
        //发起ajax请求，【不推荐】因为ajax异步，生命周期同步
        //在服务器端渲染的时候，这个函数是最后一个生命周期
        //技术胖
    },
    // 挂载阶段
    beforeMount(){
        // 可以对一些数据进行格式化
    },
    mounted(){
        // 发起ajax【推荐】前端项目大多数都是运行在浏览器，极少数是服务器渲染
        
    },
    // 更新阶段
    beforeUpdate(){
        // 可以二次对数据进行修改
    },
    updated(){
        // 只能观察到更新的数据
    },
    // 销毁阶段
    beforeDestroy(){
        //清除常驻内存的垃圾
        //对用户的离开行为进行提示
    },
    destroyed(){
        
    }

内置组件

solt 插槽

是自定义组件的高级形式,多用于模板复用,动态渲染传入的内容或组件。
使用场景：插件的封装,网站解构布局等。

• 匿名插槽
  插槽组件中传入的散内容被solt标签接收
• 具名插槽
  使用template标签,用v-solt指令绑定名字,插槽组件中slot组件使用用name属性给插槽取名字
• 插槽传参
  slot组件传递参数,上游组件的template接收
• v-slot：的缩写是#

keep-alive 缓存组件

语法:`<keep-alive excludes='MyDom'>
    <MYDom>
</keep-alive>`
凡是被它包裹的组件,都会被缓存
- includes 只缓存被指定的组件
- excludes 不缓存指定的组件

keep-alive生命周期

- activated 缓存的组件被激活了
- deactivated 缓存的组件被停用了

component 动态加载组件

必须使用is属性动态加载组件名称,解放了大量书写v-if或v-show问题。

transition 动画组件

使用name属性控制动画类名的前缀,从而可以产生不同的动画效果。
一般用于嵌套在路由视图组件或动态组件。

template 模板

第一种作为vue模板标签使用,第二种作为插槽的模板。

nextTick

保证所有dom全部更新完毕之后才会触发,用于获取dom更新后的获取dom1节点数据

指令

html
专门用于渲染字符串dom片段,底层做了防止注入攻击,会将js内容转义

text
只能渲染文本内容

for
字符串,数字,对象,数组
遍历数组和对象的区别是对象有三个参数,分别是值,键,下标

model
数据双向绑定指令,专门用在表单元素上

on
缩写是@,两种用法,绑定原生事件,自定义事件

bind
可以绑定原生的属性,
绑定自定义属性
绑定给自定义组件上是传参方式
动态绑定属性
v-bind:[name]='data'
动态绑定属性值
v-bind:checked='state'
绑定class
v-bind:class='{active:true/false}'
绑定style
v-bind:style='{color:color}'

once
让元素内的值永远保持第一次渲染,优化性能的一个手段,比如给固定写死的静态dom加上之后,这里的dom将不会在更新了,不参与diff重算。

pre
不会使用vue去解析里面的内容,而是当字符串渲染了,

clock
防止闪烁，当一个值在页面中使用的时候,如果该值是ajax的返回值,那么值初始化的时候为空,则会导致页面闪烁。

show
控制元素的显示与隐藏,原理是css的display:none;

if
控制元素的加载与销毁,如果频繁切换应该使用v-show

slot
插槽的指令,缩写是#

监听和计算属性

相同

都可以监听数据的变化

不同

计算属性监听一个值,返回一个新值,如果这个值不用的话,则监听不会触发。
watch专门监听一个值的改变

计算属性没有数据类型的限制,watch如果监听对象或者数组,必须开启深度监听deep为true;

watch可以执行异步操作,computed是立即返回,所以不能执行异步

计算属性只要写了受观测的数据,就会立即对数据监听,watch只能监听一个数据。

计算属性如果默认是只读的,如果想修改则必须是对象写法,在set函数中修改被监听的数据。

修饰符

事件的

• once 事件只执行一次
• native 绑定原生事件 当给予组件绑的时候
• stop 组织冒泡
• prevent 阻止默认事件

属性的

v-bind.sync 伪双向数据绑定
v-bind.prop 把属性转成不可见的属性

指令

v-model.lazy 当用户失去焦点后触发
v-model.number 尝试转成NaN
v-model.trim 去掉首尾空字符串

键盘修饰符

13和enter 监听回车

鼠标

right和left

订阅发布模式

订阅者: 派发事物接收的对象,比如dom元素
发布者: 事物委托对象,比如proxy

骨架屏优化

当页面基于数据渲染,数据尚未获取到,使用骨架屏占位。

动态绑定指令

v-bind；[name]。name是变量,赋予任意值

组件通信

父传子

父组件v-bind传递,子组件props接收

子传父

父组件v-on函数,子组件使用$emit调用

父子双向

• v-model 自动注入value值和input函数
• .sync 伪数据双向绑定

兄弟

• 让父组件充当中间人
• $parent获取到父组件实例
• $children 获取到所有的子组件

跨级

• $root 获取根实例对象
• $on和$event使用同一个父级,子级用on发送,父用event监听
• 黑魔法vae1.0bus中央事件池子。new一个vue让它作为中间人,基于on和event来处理。
• 最终是vuex

vue项目优化

• 按需加载-组件的懒加载,只有当用户访问该组件时,才去加载。
• 打包的时候关闭源码映射,可以提高打包速度
• 模块化代码复用。
• 使用动态加载组件component
• 频繁切换的元素优先使用v-show
• 使用循环渲染的时候避免使用v-if
• 给大量子元素绑定事件的时候优先使用事件委托
• 使用精灵图优化加载小图标
• 使用骨架屏优化首屏加载慢的问题

自定义系统（指令/过滤器）插件

自定义指令directive

扩展vue没有的指令功能,举例:当页面打开后让input获取焦点

• 语法

directives:{
    focus:{
        inserted(el,binding,olnode){
            // el 是绑定的元素对象
            // binding是outions,里面有value
            // oldnode旧的虚拟dom
        }
    }
}

自定义过滤器filters

在不修改原数据的情况下,对数据进行处理,返回新的数据。

• 语法:

// 声明
filters:{
    add(value){
        return value+666
    }
}
// 使用
{{n | add}}

对象.install 方法

vue的插件是一个综合性的功能封装。

• 语法:

// 声明
exprot default {
    install(value,option){
        /// *** value.filters
    }
}
// 使用
Vue.use(plugin,{lg:trye})

mixin 混入

减少当前组件的代码体积的,把一些无关紧要的代码提取到外面,可以给其他组件进行复用。
混入是js代码复用。
但是,它不用和全局使用,否则会出现冲突

• 如果混入里的值或函数和组件的重复了,一定用组件里的。
• 如果混入里生命周期和组件的重复了,先混入后组件,会合并掉

spa 单页面应用

项目中只有一个html文件。

v-model原理

object.defineProtperty

el和$mount 区别

el是配置,mount是方法
el比mount挂载的快。mount要等全部

Vue.set方法

因为object.defineProtperty方法的缺陷,导致动态添加或删除的属性不能被监听响应,所有才用这个方法。

---

路由的底层原理

history和loaction.hash

路由的传参方式

• query 用？类似于get请求方式传参
• params 动态路由的动态字段
• hash 非hash模式下使用#传参,会被hash接收
• meta 元数据,元信息,路由配置的时候写死的。
• 属性传参,凡是被他渲染出来的路由组件都会接收props属性

路由的拦截器

全局守卫：前置守卫 beforeEach 用来做全局的路由权限管理 后置守卫 afterEach 没有next，最好用来上报日志
路由独享：beforeEnter 确认进入前
组件守卫：beforeRouteUpdate 获取动态组件的字段 更新, 离开 beforeRouteLeave 用于确人用户离开行为，表单页面

router和route区别

router是new的vueRouer的实例对象,它拥有路由的全部功能。
route 仅表示当前路由的信息

声明式导航和编程式导航

声明式指<router-link>
编程式指this.$router.push

跳转方式

push 向历史记录中添加一条记录
go 向历史记录中前进后退，值是数字
back 后退
forward 前进
replace 用当前地址替换历史记录中最后一条地址

路由配置方式

动态路由：使用/:name
嵌套路由： 使用children
别名：alias用数组包裹可以设置多个
重定向：redirect
命名路由：name属性

路由的组成部分

导航，视图，配置

路由组件懒加载

一个函数返回import函数加载组件
() => import('./component')

监听滚动事件

scrollBehavior可以设置滚动条初始的位置，当路由跳转的时候他会执行

vuex工作流程

1.store里的state在组件中使用
2.组件使用dispatch调用action派发业务
3.action使用commit调用mutation
4.mutation调用state进行修改
5.当state改变后,store通知组件更新

vuex的组成部分

• state
• getters
• mutations
• modules
• actions
• plugins
• strict

严格与非严格模式的区别

严格模式

mutations只能运行同步代码,且只能在这里修改state

非严格模式

state可以在任何地方修改,mutations也可以执行异步代码

辅助函数

• matState
• mapGetters
• mapMutations
• mapActions
• createNamespacedHelpers

mutation和action区别

mutation式唯一修改state,且只能运行同步代码,action专门用于处理异步操作,只能通过调用mutation修改state

state和getter的关系

state相当于组件里的data,getters相当于组件里的computed
getters是基于state计算出来的

vuex的模块化

modules用于大型项目开发，主要负责独立模块的独享状态管理
默认state和getter是归属于当前模块的作用域的，但是mutation和action函数会自动提升到根store对象下面，所以需要命名空间，每个模块使用namespaced属性开启

ui库的使用

pc：element-ui 移动：vant