<>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
插槽的指令,缩写是#

<>在vue中为啥v-for和v-if不能一起使用

因为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 v-for="item in list"> {{item}} </div> computed() { list() { return [1, 2,
3, 4, 5, 6, 7].filter(item => item !== 3) } }
<>路由有哪些模式

* hash模式:通过#号后面的内容的更改,触发hashchange事件,实现路由切换
* history模式:通过pushState和replaceState切换url,触发popstate事件,实现路由切换,需要后端配合
<>监听和计算属性

<>相同

都可以监听数据的变化

<>不同

计算属性监听一个值,返回一个新值,如果这个值不用的话,则监听不会触发。
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

技术
©2019-2020 Toolsou All rights reserved,
TypeScript:函数类型接口8道大厂指针笔试题让你秒杀指针!!!MySQL 日期时间加减mysql 查询条件之外的数据_mysql 查询符合条件的数据查linux的操作系统版本,如何查看Linux操作系统版本?将String类型转换成Map数据类型使用uuid做MySQL主键,被老板,爆怼一顿C语言中的字符串函数和字符函数linux服务器中毒排查--基础篇C# ASCII码字符转换