vue知识小结

面试视频知识

vue面试

vue2的生命周期？

1. 生命周期有哪些？
   1. beforeCreate
   2. created
   3. beforeMount
   4. mounted
   5. beforeUpdate
   6. updated
   7. beforeDestroy
   8. destroyed
2. 一旦进入页面或者组件，会执行哪些生命周期
   1. 前四个
3. 在那个阶段有$el(组件的根节点)也可以理解成DOM节点,$data？
   1. beforeCreate 都没有
   2. created 有data，没有el
   3. beforeMount 有data 没有el
   4. mounted 都有
4. 如果加上kee-live就会多两个生命周期，这是在updated后面执行。
   1. activated（进入）、deactivated（离开）
5. 如果加入keep-live，第一次进入组件会执行哪些生命周期？
   1. 前四个加activated（进入）、deactivated（离开）
6. 如果加入keep-live，第二次或第n次进入组件会执行哪些生命周期？
   1. 只执行activated生命周期

v-if和v-show的区别

1. v-if是创建和销毁DOM节点,v-show是显示和隐藏DOM节点
2. 使用场景不同
   1. 初次加载v-if比v-show好，页面不会加载盒子
   2. 频繁切换的时候v-show更好，创建和删除开销比较大，显示隐藏开销比较小

v-if和v-for优先级

1. v-for的优先级比v-if高，源码决定的

ref是什么

来获取DOM节点的。this.refs.__获取dom

scoped

style只在当前页面起作用

vue中如何让插件中的css只在当前组件中起作用

1. npm i sass-loader node-sass --save安装sass

父传子，子传父，兄弟传值

1. 父传子

computed/methods/watch区别

1. computed和methods区别：computed有缓存，methods没有缓存。
2. computed和watch区别：watch是监听，数据或者路由发生改变才可以响应。computed计算某一个属性的改变，如果某一个值改变了，计算属性会监听到进行返回，watch是当时监听到数据改变了，才会执行内部代码。
3. watch (重视过程)， 监听一个值的改变。 不用返回值,没有用 ，异步同步
4. 计算属性(重视结果)=》 解决模板过重问题，必须有return ，只求结果 ,有缓存，同步。
5. 方法==》 事件绑定， 逻辑计算。可以不用return，没有缓存

props和data谁的优先级高

1. props是父组件传到子组件中的值的存储位置
2. props–>methods–>data–>computed–>watch

指令

指令就是对底层dom进行封装，作者给留方案 例如v-hello就是一个自定义的指令
实际应用–通过指令知道什么时候DOM创建完成,从而进行依赖dom的库的初始化工作

1. 自定义指令有五个生命周期（也叫钩子函数），分别是 bind,inserted,update,componentUpdated,unbind
   1. bind:相当于created阶段的。 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
   2. inserted:相当于mounted阶段的。 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
   3. update:相当于beforeupdate阶段的。 被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
   4. componentUpdated:相当于updated阶段的。 被绑定元素所
   5. 在模板完成一次更新周期后调用。
   6. unbind:相当于销毁。 只调用一次，指令与元素解绑时调用。

//! directive定义指令
        
        Vue.directive('hello', {
            //! 指令的生命周期 
            //加个形参，可以获取指令对应的节点，然后可以对节点进行操作  binging绑定的是指令的节点
            inserted(el, binding) {
                console.log('inserted', el)
                //binding只有在第一次插入节点中才会触发。
                console.log('inserted', binding)
                el.style.background = 'red'
                el.style.background = binding.value
            },
            //每次更新的时候会触发，但是触发也不会更改上面的binding
            //但是当传参的时候，可以更改binding的状态
            update(el, binding) {
                console.log('update', binding)
                el.style.background = binding.value
            },
            /* inserted和update简写
            (el,binding)=>{
                el.style.background=binding.value
            }
            
            */
        })

学的基础vue

v-html和v-text的区别

v-html用于输出html，它与v-text区别在于v-text输出的是纯文本

事件修饰符

1. @click.self=“handulclick”，.self也可以阻止冒泡
2. .stop这样的就是事件修饰符 ，这个可以阻止冒泡
3. .once表示只能触发一次
4. .prevent阻止默认行为
5. .enter按键修饰符，表示enter按键按下后才会触发

表单修饰符

1. v-model.lazy=“mytext”， .lazy是去掉焦点的时候才开始同步v-model的数据
2. .number只能输入数字
3. .trim 去除首位空格

父传子

父传子通过属性进行传值，子传父通过事件传值

父组件
<header :aaa='msg'>

子组件
// props:['aaa']
props:{
  aaa:''
}

子传父

1. 子组件：this.$emit(‘自定义事件名称’,要传的数据)
2. 父组件：<header @自定义事件名称=‘getval’>
3. methods:{getval(msg){msg就是子组件传递的数据}}

兄弟之间传值

bus.$on监听。bus.$emit触发

1. A兄弟传值：bus.$emit(‘footer’,数据)
2. B兄弟接收：bus.$on(‘footer’,(data)=>{this.str=data})

vuex状态管理模式

vuex有哪些属性

1. state：类似于data（）
2. getters：类似于computed
3. mutations：类似于methods
4. actions：提交mutations
5. modules：把以上四个属性再细分，让仓库更好管理

vuex是单项数据流

veux中mutaions和actions区别

1. mutaions：都是同步事物
2. action：可以包含任何异步操作和同步操作
3. 在调试工具中可以看出来

vuex如何做到持久化存储

vuex本身不是持久化存储
1. 方法一：使用localStorage自己写
2. 方法二：使用vuex插件安装vuex-persistedstate数据持久化插件

DOM

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

promise

Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。避免回调地狱

// resolve可以把异步数据传递出来
let p = new Promise(resolve=>{
  resolve('nihao')
})

// 通过then拿异步函数
p.then()

ajax、axios、fetch

1. axios是基于ajax和promise进行封装的库
2. fetch是浏览器原生的，内置的类
3. fetch内置的类。进行数据请求，天生就是基于Promise进行管理的
4. fetch是ES6才有的，如果想让它兼容更多的浏览器就需要在webpack中安装babel-Polyfill。

封装的原因：api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护.

import axios from 'axios'
import qs from 'qs'
/* 根据环境变量区分接口的默认地址 */
switch(process.env.NODE_ENV){
  case:'production':axios.defaults.baseUrl='http://api.wangzhi.cn'// 部署到服务器上的环境地址
  break
  case:'test':axios.defaults.baseUrl='http://192.168.20.12:8080'// 测试服务器地址
  break
  default:axios.defaults.baseUrl='http://127.0.0.1:3000' // 开发环境

}

/* 设置超时间和跨域是否被允许携带凭证 */
axios.defaults.timeout=10000 // 设置时间
axios.defaults.withCredentials=true // 是否允许跨域资源凭证携带

/* 设置请求传递数据的格式（看服务器要求什么格式） */
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
axios,defaults.transformRequest=data=>qs.stringfy(data) //post请求

/* 加拦截器：请求拦截器+响应拦截器 */
/* 设置请求拦截器 (客户端-->请求拦截器-->服务端)
    token校验（jwt）：接受服务器返回的token，存储到vuex/本地存储中，每一次向服务器发请求，我们应该把token带上
*/
axios.interceptors.request.use(config=>{
  // 携带上token
  let token = localStorage.getItem('token')
  token && (config.headers.Authorization = token )
  return config
},error=>{
  return Promise.reject(error)
})

/* 响应拦截器（服务-->响应拦截器（拦截的统一处理）-->客户端获取信息）
*/
axios.defaults.validateStatus = status=>{
  //自定义响应成功的HTTP状态码
  return /^(2|3)\d{2}$/.test(status)
}
axios.interceptors.response.use(response={
  return response.data
},error=>{
  let{response}=error
  if(response){
    // 服务器最起码返回结果了
    switch(response.status){
      case 401: // 权限
        break
      case 403: // 服务器理解请求，但是拒绝执行
        break
      case 404: // 找不到页面
      break
    }
  }else{
    // 服务器连接没有返回
    if(!window.navigator.onLine){
      // 断网处理，可以跳转到断网页面
      return
    }
    // 服务器端的问题
    return Promise.reject(error)
  }
})

axios.get('/user/12345')
  .then(response => {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

export default axios

跨域问题？

浏览器的同源策略：两个页面具有相同的协议、主机、端口号。有一个不同就跨域了。

1. 解决跨域问题：配置vue.config.js解决跨域
   1. 原理：
      1. 将域名发送给本地服务器（localhost：8080）
      2. 再由本地服务器去请求真正的服务器
      3. 因为请求时从服务器端发出的，所以就不存在跨域问题

注意：配置完成后重启服务器

devServer: {
    port: 8080, // 随便改端口号
    proxy: {
      '/api': {
        target: 'https://i.maoyan.com',
        // host: '*.000*.com',
        changeOrigin: true
        // 路径修改，把、api替换成空。
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }

nginx

1. nginx免安装版本放在不要有中文的路径中
2. 把dist文件直接粘贴在nginx里面
3. 把项目文件dist拉入到nginx文件夹中
4. 在nginx文件中的conf文件夹的nginx.conf复制一份,修改其中的数据

// 修改端口号
 server {
        listen       8080;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
// 修改root后面的数据
        location / {
            root   dist;
            index  index.html index.htm;
        }

5. 使用Powershell命令面板.\nginx.exe -c .\conf\guan.conf开启
6. 如果想关闭，再重新打开一个命令面板，输入关闭指令
7. .\nginx.exe -s stop关闭
8. .\nginx.exe -s reload关闭
9. 然后直接把nginx直接放在服务器上

dependencies和devDependencies的区别？

1. devDependencies：开发环境使用
2. dependencies：生产环境使用
3. 生产环境使用npm install/i xxx@version -S/--save
4. npm install/i xxx -D/--save-dev开发环境使用