Vue

Vue知识点

Vue搭建脚手架

vue init webpack xxx(文件名)

什么是vue的生命周期:
每个vue实例再被创建时都要经过一系列的初始化过程监听数据加载数据编译模板挂载dom 销毁
Vue的生命周期
- beforeCreate:实例初始化在new一个vue实例后,只有一些默认的生命周期和默认事件,其他东西还没创建,不能在这个阶段使用data和methods方法,因为还没有初始化,
- created:实例初始化完成 data和methods方法已经初始化最早调用可以在这个阶段
- beforeMount:正在载入这个阶段的时候内存中的模板已经编译好了,但是没有挂载到页面,此时的页面还是旧的
- mounted:dom数据准备完毕这个阶段vue初始化已经完成,我们想要操作页面的dom节点最早可在这个阶段
- beforeUpdate:数据更新前页面中的数据还是旧的,data中的数据是更新后的,页面还没有和最新的数据保持一致
- updated:数据更新完成页面中的数据和data的数据保持一致都是最新的
- actived:当组件被激活时（使用内置组件 keep-alive 来缓存实例，而不是频繁创建和销毁(开销大)）
- deactive:组件失效时
- beforeDestroy:组件销毁前这个阶段data、methods、指令等都还是可用状态还没有被真正的销毁
- destroyed:组件销毁后这个阶段data、methods、指令等都不可以使用组件已经被销毁
- errorCaptured:(2.6版本新增)错误监听钩子
vue第一次加载页面触发哪些生命周期:
beforeCreate created beforeMount mounted
Vue v-if 和 v-show的区别:
- 相同点:v-if 和 v-show都可以动态控制dom元素显示隐藏
- 不同点:v-if是将dom添加或者删除，v-show是将dispaly的属性改为none，dom元素还存在HTML结构中
vue中Computed 和 Watch的使用和区别:
- Computed:适用于计算已存在的值并返回，只有当被计算的值发生改变时才会触发，具有缓存性
- Watch:监听某一个值，当被监听的值发生变化时，执行对应的操作或回调，刷新页面或重新渲染时只不变也会执行
- 区别:watch更加适用于监听某一个值的变化并做对应的操作，比如请求后台接口等，而computed适用于计算已有的值并返回结果
vue中的$router 和 $route的区别:
- $route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象
- $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法返回上一个history也是使用$router.go方法
Vue的响应式原理:
当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化

当obj的param被赋值的时候,执行set对应的方法；当obj的param被取值的时候，执行get对应的方法。

let obj = {}
Object.defineProperty(obj,"param",{
    set :function SelfSetter(newVal) {
        console.log("被赋值")
        this._param = newVal
    },
    get :function SelfGetter () {
        console.log("取值")
        return this._param
    }
})
obj.param = 'newparam'; //被赋值
console.log(obj.param); //取值  newparam

什么是vuex
全局的状态管理器，比如在state里声明一个变量可以在任何组件获取并且修改，修改可以得到全局的响应。
- State：vuex中的变量声明，全局组件的data，用于保存所有组件的公共数据
- Getters：和computed一样，可以理解为计算属性。返回值会根据它的依赖值被缓存起来，只有当依赖值发生改变时才会被重新计算
- Mutations：和methods一样，可以理解为函数方法。mutations对象中保存着更改数据的回调函数, 第一个参数是state, 第二参数是是自定义的参数。
- Actions：actions 类似于 mutations，不同在于：1.actions提交的是mutations而不是直接变更状态 2.actions中可以包含异步操作, mutations中绝对不允许出现异步 3.actions中的回调函数的第一个参数是context, 是一个与store实例具有相同属性和方法的对象
vue-router 是什么?它有哪些组件
vue的路由 router-link router-view
active-class 是哪个组件的属性
vue-router 当routerlink标签被点击时将会应用这个样式
怎么定义 vue-router 的动态路由? 怎么获取传过来的值
path:/user/:id
$route.params.id
vue-router 有哪几种导航钩子

每个守卫方法接收三个参数:

to: Route: 即将要进入的目标路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。(确保要调用 next 方法，否则钩子就不会被 resolved)

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调

全局守卫beforeResolve
```
const router = new VueRouter({ ... })
router.beforeResolve((to,from,next) => {
    next()
})
```
前置守卫beforeEach
```
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
    // ...
    next()
})
```
后置守卫afterEach(不需要next())
```
const router = new VueRouter({ ... })
router.afterEach((to, from) => {
    // ...
})
```
路由独享的守卫
```
const router = new VueRouter({
    routes: [
        {
            path: '/index',
            component: index,
            beforeEnter: (to, from, next) => {
                // ...
                next()
            }
        }
    ]
})
```
组件内的守卫
- beforeRouteEnter 在渲染该组件的对应路由被 confirm 前调用
- beforeRouteUpdate 在当前路由改变，但是依然渲染该组件是调用
- beforeRouteLeave 导航离开该组件的对应路由时被调用
```
<template>
...
</template>
export default{
    data(){
        return{

        }
    },
    beforeRouteEnter (to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 this
        // 因为当守卫执行前，组件实例还没被创建
    },
    beforeRouteUpdate (to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
        // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
    },
    beforeRouteLeave (to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
    }
}
```
beforeRouteEnter 守卫不能访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
```
beforeRouteEnter (to, from, next) {  
    next(vm => {  
        // 通过 `vm` 访问组件实例
    })  
}  
```
注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。
```
beforeRouteUpdate (to, from, next) {
    console.log(this)
    this.name = to.params.name
    next()
}
```
这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
```
beforeRouteLeave (to, from , next) {
    const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
    if (answer) {
        next()
    } else {
        next(false)
    }
}
```
完整的导航解析流程:
- 1.导航被触发。
- 2.在失活的组件里调用离开守卫。
- 3.调用全局的 beforeEach 守卫。
- 4.在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
- 5.在路由配置里调用 beforeEnter。
- 6.解析异步路由组件。
- 7.在被激活的组件里调用 beforeRouteEnter。
- 8.调用全局的 beforeResolve 守卫 (2.5+)。
- 9.导航被确认。
- 10.调用全局的 afterEach 钩子。
- 11.触发 DOM 更新。
- 12.用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
$nextTick的使用:
vue响应式的改变一个值以后，此时的dom并不会立即更新，如果需要在数据改变以后立即通过dom做一些操作，可以使用$nextTick获得更新后的dom
delete和Vue.delete删除数组的区别:
delete删除的元素只是置为空其他元素键值对保持不变
$delete和splice等一样直接删除但也改变了元素的键值对
params和query的区别:
params只能用name传值 query可以用name和path传值
params参数不显示在地址栏中 query参数明文发送
params是路由的一部分,必须在理由后面添加参数 query是拼接在url后面的参数,没有也没关系
axios的优势:
适用promise的方法
自动转换JSON格式
客户端支持防御跨网站伪造攻击
封装 vue 组件的过程:
创建一个组件
import 引用组件用components注册组件
父组件给子组件传值可用props
子组件给父组件传值可用$emit
assets和static的区别:
- 相同点:
  assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下
- 不同点:
  1.assets中存放的静态资源文件在项目打包时，也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传，所谓打包简单点可以理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器
  2.static中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是static中的资源文件由于没有进行压缩等操作，所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间
- 使用建议:
  将项目中template需要的样式文件js文件等都可以放置在assets中，走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfoont.css等文件可以放置在static中，因为这些引入的第三方文件已经经过处理，我们不再需要处理，直接上传
单页面应用和多页面应用区别及优缺点:
- 单页面:
  1.浏览器一开始要加载所有必须的 html, js, css
  2.用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小
  3.前后端分离
  4.数据的传递简单
  5.不利于seo
  6.首屏加载时间长
  7.页面复杂度提高很多
  8.url模式 index/#/one
- 多页面:
  1.页面跳转时是整页刷新
  2.用户体验差，慢，页面切换加载缓慢，流畅度不够
  3.数据传递需要依靠url cookie localStorage等
  4.url模式 index/one.html
vue组件中的data为什么非得是一个对象:
Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了javascipt只有函数构成作用域(注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域)，data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立,不会相互影响
vue-router响应路由参数的变化
1.watch
2.beforeRouteUpdate
Vue-cli打包命令是什么？打包后导致路径问题，应该在哪里修改
npm run build
解决：到config文件夹中打开index.js文件文件里面有两个assetsPublicPath属性，更改第一个，也就是更改build里面的assetsPublicPath属性:'/'改为'./'
PS:其他问题 https://www.cnblogs.com/zly1022/p/10108548.html
vue的两个核心点：
ViewModel 组件
vue常用的修饰符：
- 事件修饰符
  .stop 阻止点击冒泡
  .prevent 阻止默认事件
  .capture 由外到内捕捉事件
  .self 只触发自己范围内的事件不包括子元素
  .once 只触发一次事件
- 键盘修饰符
  .enter：回车键
  .tab：制表键
  .delete：含delete和backspace键
  .esc：返回键
  .space: 空格键
  .up：向上键
  .down：向下键
  .left：向左键
  .right：向右键
- 鼠标按钮修饰符
  .right
  .left
vue mock的使用:
https://blog.csdn.net/bocongbo/article/details/81700843
什么是mvvm:
model view viewmodel 将数据和视图绑定在一起当数据发生改变随即视图也跟着改变
什么是 SPA 单页面，它的优缺点分别是什么
- 只有一个html文件通过路由改变的方式实现页面切换
- 优点：
  1.用户体验好
  2.首次加载不需要加载整个页面
  3.对服务器压力小
- 缺点：
  1.初次加载耗时比较长
  2.不利于SEO
Vue 的单向数据流：
vue是单向下行的数据绑定如：父组件给子组件传值而子组件不能直接修改父组件的数据
vue-router 路由模式有几种？
hash history abstract
Vue项目的优化：
1.v-if和v-show的区别使用
2.使用v-for遍历必须加key
3.事件的销毁(清除定时器递归做结束出口)
4.图片懒加载
5.路由懒加载
6.服务端渲染
Vue 中的 key 作用：
vue中vnode的唯一标识，用来是diff算法更快更精准
Proxy 与 Object.defineProperty 优劣对比：
Proxy：可以直接监听对象可以直接监听数组的变化
Object.defineProperty：兼容性教高(IE9)
keep-alive:
配合路由使用可以是组件保留状态避免重复渲染
有两个属性:
include:组件名只要匹配添加的名称表示会被缓存
exclude:组件名匹配添加的名称表示不会被缓存
有两个生命周期：
activated deactivated
父组件监听到子组件的生命周期:
1.在子组件的生命周期里使用$emit给父组件发送一个事件
2.在父组件的子组件标签上使用@hook:mounted (hook可以监听任何一个生命周期)
直接给一个数组项赋值，Vue 能检测到变化吗？
不可以因为
vue响应式原理：
vue初始化的时候会遍历对象所有的property并且通过object.defineProptery把他们添加getter和setter方法而每个vue的组件都有一个watcher函数当数据发生改变时setter会调用watcher重新计算重新渲染组件

手写实现一个双向绑定：

  <input type="text" id="ipt" />
  <p id="p" />
  let oInp = document.getElementById('ipt')
  let oP = document.getElementById('p')
  let obj = {}
  Object.defineProperty(obj,'text',function(){
    set(newValue){
      oInp.value = newValue
      oP.innerHTML = newValue
    }
  })
  oInp.addEventListener('keyup',function(e){
    oInp.text = e.target.value
  })

怎么解决vue动态设置img的src不生效的问题
在src里面使用require 因为不这样的话会被默认为静态资源处理