vue

vue3.0什么时候发布的

• 2020.9.18

vue3.0性能优化

• 路由懒加载
• keep-alive缓存页面
• 事件销毁
• 图片懒加载
• 子组件分割
• SSR
• 变量本地化
• 无状态组件标记为函数组件

vue3.0 新增api

• ref
• watch
• computed
• reactive
• unref
• toraw

vue脚手架安装

• vue ui
• vue cleate

vue双向数据绑定原理

• vue采用数据劫持结合发布，通过obkect.definepropety来劫持各个属性的settr和gettr 在数据发生改变的时候发布给订阅者 触发相应的监听回调 3.0基于es6 proxy

vue 相关指令

• v-for 循环 需要一个key 作用是优化代码
• v-once 只渲染一次
• v-on 绑定事件
• v-show 隐藏
• v-if 销毁
• v-model 表单双向绑定
• v-bind 绑定属性值
• v-html 相当于 innerHTML
• v-text 相当于innerText v-else v-else-if

插值表达式

• {{}}

vue缓存组件

• keep-alive

vue生命周期 详细说明一下

1. 生命周期分为八个阶段

• beforecreate在实例初始化之后，数据观测者（data observer）和 event/watcher 事件配置之前调用 骨架屏再次进行
• created 在实例创建完以后立即调用 实例已经完成 数据观测者 属性和方法的运算watch/event事件回调 可以进行ajax请求 因为ajax请求是异步代码不会影响代码执行顺序
• beforemount 在挂在之前 相关的render函数首次调用
• mounted el被创建被挂载到实例上之后在调用该钩子函数如果root实例挂载了一个文档内元素当调用mounted的是vm.也在文档之内 ajax在这里请求
• beforeupdate 数据更新之前 发生虚拟dom重新渲染和打补丁之前
• updated 数据更新之后 由于数据跟新导致的虚拟dom重新渲染和打补丁 在这之后会调用该钩子函数
• beforedestroy 实例销毁之前 在这里实例仍然可以用
• destroyed 实例销毁之后 清除定时器 和没有完成的ajax请求 销毁完成之后vue.js实例指示的所有东西都会解除绑定所有事件将会被移除 多有的实例也会被销毁

什么是mvvm 它适用于那些场景

• mvvm 从视图到模型 从模型型到视图 VUE是数据驱动试图的dom和数据绑定在一起了 每当数据发生改变dom也会随着变化
• 在数据操作比较多的时候 mvvm框架会更合适 有利于通过

action-class 是那个属性的组件

• 他是vue-router模块的 router-link的属性

如何定义router的动态路由

• 在静态路由名称前面添加：例如设置id动态路由参数 为路由对象的path属性/:id

如何获取传过来的动态参数

• 在组件中 使用$router对象的params.id 既$router.params.id

vue 路由的导航钩子

• 全局导航钩子 router.beforeEach(to，from，next)作用是跳转前进行判断 to即将要进入的下一个路由 from 当前路由 next 是否进入
• 第二种是组件内的钩子 beforeRouteUpdate
• 单独路由独享的组件 beforeEnter 在单独路由中使用

vue中如何绑定事件

• 通过 v-on v-on：click=函数
• 语法糖 @：click=函数

vuex是什么如何使用 在那种场景能使用它

• vuex 是针对vue.js框架实现的状态管理系统
• 使用vuex 要引入store 并注入vue组件中 在组件内部可以通过$store访问store
• 单页面应用 组件通信

如何实现自定义组件

• 全局自定义组件vue.js提供了directive方法 可以用来自定义组件 directive接受两个参数 一个是指令名称 另一个是函数
• 局部自定义指令 通过组件的directive属性定义

vue-router是什么 他有什么组件

• vue.js路由插件 router-link（跳转） router-view（显示）

导航钩子函数有哪些

• 全局 beforeEach beforeResolve afterEach、
• 组件 组件级钩子有 beforeRouteEnter、beforeRouteUpdate(Vue2.2新增的) beforeRouteLeave。
• 参数 to：即将要进入的目标路由对象。 from：当前导航正要离开的路由。 next：一定要用这个函数才能到达下一个路由，如果不用就会遭到拦截。

vue双向数据绑定的原理是什么

• vue.js采用的是es5提供的属性特性功能 结合发布者-订阅者模式 通过object.definedproperty 为各个属性提供的settr和gettr属性 触发相应的监听回调

描述封装vue组件过程

• 组件可以提升整个项目的开发效率 能够把页面抽成多个相对独立的模块解决了 传统项目开发中效率低 难维护 复用性等问题
• 使用vue.extend方法创建一个组件 使用component发布方法注册组件 子组件需要数据可以在props中接受数据而子组件修改好数据后 传递给子组件可以采用emit

你是怎么认识vuex的

• vuex可以理解为一种开发者模式或框架 它是对vue框架数据层面的扩展 通过状态集中管理驱动组件的变化 应用的状态管理放在store中 改变方式是提交 mutations这是是同步代码 一部逻辑封装在action中

vuex组成部分

• state 存储数据
• getters 计算属性
• mutations 修改state状态 同步
• actions 异步逻辑处理 异步
• modules 模块

vue-cli项目的src目录每个文件夹的用法

• assets 存放资源的 components 存放组件 router 定义路由相关配置 view 是视图 app.vue是一个应用组件 mian.js是入口组件

在vue-cli怎么使用自定义组件

• 在components目录新建文件 脚本一定要暴露的接口
• 导入需要用到的界面
• 将组建注入到vuejs的子组件的components属性中
• 在template的视图中使用自定义组件

谈一谈你对template编译的理解

• 首先转化为ast（抽象语法树）即将源代码结构抽象成树状表现形式 然后通过render进行渲染并返回Vnode（虚拟dom节点）

v-if和v-show的区别

• v-if 把dom节点进行销毁
• v-show 把dom节点进行隐藏 在html中还是会显示

如何让css样式旨在当前页面生效

• scoped

vue三部分

• template
• style
• script

如何实现嵌套路由 如何进行页面跳转

• 路由嵌套会将其他组件渲染到组件内 而不是使整个页面跳转到 router-view定义组件渲染的位置 进行页面跳转

ref属性有什么作用

• 在组建内可以直接访问组件内部的一些元素可以定义属性此时可以在组件内部通过this.$refs属性 更快捷的访问设置ref属性元素 这是一个原生dom元素要使用原生dom api操作他们

vuejs是什么

• vuejs 是渐进式mvvm框架 轻便灵活 完全有能力驱动采用单文件组件以及vuejs生态 系统支持的库开发的复杂单页面

vue特性

• mvvm模式 高内聚低耦合
• 组件化开发
• 指令系统
• 支持虚拟dom

vue特点

• 简洁 数据驱动 组件化 轻量 快速 易获取

keep-alive组建的作用

• 当标签包裹住动态组件是 会缓存不活动的组件实例 而不是销毁会他们 当keep-alive切换组件时他的actived和deactived这两个生命周期函数会执行
• component：is 动态缓存组件

如何解决页面闪烁

• vuejs提供了一个v-cloak指令 该指令一直保持在元素上 直到关联实例结束编译和css一起使用

如何在循环中实现v-model的数据双向绑定

• 有时候需要循环创建input，并用v- model实现数据的双向绑定。此时可以为v- model绑定数组的一个成员 selected [$ index]，这样就可以给不同的 input绑定不同的v- model，从而分别操作它们

Vue.js文件中的样式覆盖不生效的问题如何解决？

• style 再加上scoped可以让样式私有化 将需要覆盖的这部分代码单独的css文件中 最后在mian里面引入即可

如何解决数据层结构太深的问题

• 可以使用vm.$set("demo",a.b.c.d)手动定义一层数据

如何检测对象的变化

• 由于 JavaScript特性的限制，Vue.js不能检测到对象属性的添加或删除。因为Vue.js在初始化时将属性转化为 getter/setter，所以属性必须在data对象中定义，才能在初始化时让Vue.js转换它并让它响应

如何检测数据变化

• 由于 JavaScript特性的限制， Vue. js不能检测到下面数组的变化，即以下数组中改变的数据“丢失”了。 通过直接索引设置元素，如app.arr[0]=... 修改数据的长度，如 app. arr.length。 为了解决该问题，Vue.js扩展了观察数组，为它添加了一个$set( )方法，用该方法修改的数组，能触发视图更新，检测数据变化。 app.$set(app. arr, 5， 500);

什么是数据的丢失

• 如果在初始化时没有定义数据，之后更新的数据是无法触发页面渲染更新的，这部分数据是丢失的数据（因为没有设置特性），这种现象称为数据的丢失。

如何让数据持久化

• 安装palgin插件

实现多个不同条件显示不同的文字方法

• 通过“v-if,v-else”指令可以实现条件选择。但是，如果是多个连续的条件选择，则需要用到计算属性computed。例如在输入框中未输入内容时，显示字符串‘请输入内容’，否则显示输入框中的内容

如何在 Vue. js中循环插入图片？

• 对“src”属性插值将导致404请求错误。应使用 v-bind:src格式代替。

如何为选框元素自定义绑定的数据值？

• 对于单选框， value通常是静态字符串，如果v- model绑定的数据与某个 value值相等，则那个单选框被选中。
• 对于多选框，v- model绑定变量的值，通常是布尔值，true表示选中， false表示未选中。如果要自定义绑定数据的值，需要用v-bind指令设置true- value（选中时的值）以及 false- value（未选中时的值）

axios是什么？如何使用它？

• axios是在vue2.0中用来替换 vue-resource.js插件的一个模块，是一个请求后台的模块。用 npm install axios安装 axios。基于 EMAScript 6 的 EMAScript Module规范，通过 import关键字将 axios导入，并添加到 Vue. js类的原型中。这样每个组件（包括vue.js实例化对象）都将继承该方法对象。它定义了get、post等方法，可以发送get或者post请求。在then方法中注册成功后的回调函数，通过箭头函数的作用域特征，可以直接访问组件实例化对象，存储返回的数据。

import Vue from ' vue' 
 
import axios from 'axios'；
 
Vue.prototype.$http=axios；
 
 new Vue ({
 
el：' ickt',
 
data：{
 
msg：' '
 
}，
 
template：'<h1> { { msg } }</h1>'，
 
created:function() {
 
this.$http.get( 'data.json' )
 
.then（res => {
 
this. msg= res .data. data
 
})
 
}
 
})

在 axios中，当调用 axios.post('api/user'）时进行的是什么操作？

• 当调用post方法表示在发送post异步请求。

sass是什么？如何在vue中安装和使用？

（1）用npm安装加载程序（ sass-loader、 css-loader等加载程序)。 （2）在 webpack. config. js中配置sass加载程序。

module：{
 
//加载程序
 
loaders:[
 
//加载scss 
 
{
 
test:/ \ .scss$ /, 
 
loader : 'vue-style-loader！css-loader！sass-loader '
 
        }
 
      ]
 
}
（3）在组件的 style标签中加上lang属性，例如lang="scss"。

<style type="text/css" lang="scss">
 
$color:red；
 
 h1 {
 
color: $color;
 
}
 
</style>

watch和computed区别

1. 相同点都是对数据进行监听的 当数据发生改变的时候会触发监听函数
2. 不同点 watch对引用数据类型需要开启深度监听 而computed不受数据类型的影响 并且返回一个新值

map和forwach区别

• 一个有返回值一个没有 参数：下标 值 数组本身

路由传参

1. query 地址栏传参 类似于get请求 ？key=value
2. params

• 隐式传参 用params配置参数
• 显示传参 动态路由
• 显示和隐式的区别： params数据在内存里 页面刷新会导致数据丢失 quer和显示params数据会留在url里 刷新页面数据不会丢失

组件通信

1. props 父传子 @emit 子传父
2. 父传子 父组件v-bind绑定自定义属性将数据传给子组件 子组件用props接受 子传父 父组件用v-on绑定自定义函数 将函数使用$emit方法调用
3. .sync 修饰符对props进行假的数据双向绑定

 //父组件里
  <子组件名称 :prop.sync = 'name'>
  //子组件里
  this.$emit('update:prop', 新的值)

4. v-model 绑定在自定义组件会在子组件上注入一个value值 和input事件函数 value在props获取 input函数使用emit触发 简洁 容易重名
5. bus 中央事件池 不是vue的api 是一种开发思想 具体实现new vue 生成一个中间实例 然后利用该实例 作为组件交互中央事件管理器 现在vuex取代
6. vuex vue全局状态管理实现了所有组件通信 7.provide/inject provide是提供数据的 一般用在组件上 他会像所有后代组件注入一个属性 后代组件使用inject来获取
7. $parent 和$children -在子组件里使用parent 和获取父级实例 可以直接修改子组件数据上了实例

• 在父组件里使用schildren 获取子组件实例 可以直接修改子组件上的数据
• 简单的api
• 非常危险 不推荐使用

9. $attrs 和$ listeners 跨层级 简单的 好用的 小型项目中

动态引入本地图片

• require是node的引入路径 用node解析路径拿到真实的文件如果用变量的形式引入图片

data（） {
  ruturn{
    src：require(图片地址)
  }
}

修饰符

1. 事件修饰符

• stop 禁止冒泡
• prevent 阻止默认事件
• native 绑定原生事件

2. 按键修饰符

• .13 enetr 回车
• left right 监听左击右击

vue路由组成部分

• 路由配置 导航 视图

路由跳转方式

• js跳转叫做编程式跳转
• 标签跳转叫做声明式跳转

路由配置规则

• 动态路由 嵌套路由 路由重定向 路由别名

router和route的区别

• router是路由插件的实例对象 包含了路由所有的方法 一般用于js跳转
• route 是指当前路由所有的信息 一般用于获取当前路由传参或路径

vuex的组成和辅助函数

• state 存储状态 mapstate
• getters 对state进行计算的 mapgetters
• mutations 修改state代码的只能执行同步
• actions 执行异步操作不能修改state要调用mutations修改state
• plugins 安装插件 一般安装本地持久化存储插件 因为vuex数据存储子啊内存里 刷新会导致数据丢失

自定义插件

• 插件使用 vue.use（myPlugin，options）
• 开发插件 固定语法要求插件数据类是对象 插件配置 必须写在install函数中 该函数 会被诸如一个vue构造器和一个扩展配置对象options 插件开发中全局函数应在 vue.prototype原型链上