VUE REACT

  • vue生命周期（包含子孙组件的情况）

    beforeCreate     (创建前)
    created                此时进行数据请求---- 初始化数据    此时不能操作dom，只能通过异步nexttick 来操作
    beforeMount      (载入前) 挂载开始之前被调用 挂载Dom
    mounted.          （载入后） dom渲染完成
    beforeUpdate     (更新前) 更新
    updated               (更新后）
    beforeDestory (销毁前)
    detoryed           （销毁后）

     

 

  •  VUE 的原理 ： 数据双向绑定原理

         obj.defineProperty 监听 对象的 set 和 get 方法 ，来监听对象属性值改变

 

 

 

  • Vuex  原理 和 使用场景
         Vuex是通过全局注入store对象，来实现组件间的状态共享。在大型复杂的项目中（多级组件嵌套），需要实现一个组件更改某个数据，多个组件自动获取更改后的数据进行业务逻辑处理，这时候使用vuex比较合适。假如只是多个组件间传递数据，使用vuex未免有点大材小用，其实只用使用组件间常用的通信方法即可
  •  
  •  

  • Vue组件简单常用的通信方式有以下几种：
    1、父子通信：  
    父向子传值，通过props；子向父传值通过events ($emit)；   ----和 v-model 类似，v-model 不需要写子组件回传事件
  • 1，父组件调用子组件方法和属性：

a、父组件文件，声明ref属性：

<v-header ref="header"></v-header>

b、父组件函数中，用this.$refs调子组件的数据或方法：如：

  1. this.$refs.header.属性名
     

  • 2，子组件调用父组件属性和方法

    1. this.$parent.属性名
    2.  this.$parent.方法名     

    2、兄弟通信：bus   中央事件总线
  • 上面两种方式处理的都是父子组件之间的数据传递，而如果两个组件不是父子关系呢？这种情况下可以使用中央事件总线的方式。新建一个Vue事件bus对象，然后通过  bus.$emit   触发事件，bus.$on  监听触发的事件。
Vue.component('brother1',{
    data(){
      return {
        mymessage:'hello brother1'
      }
    },
    template:`
      <div>
        <p>this is brother1 compoent!</p>
        <input type="text" v-model="mymessage" @input="passData(mymessage)">
      </div>
    `,
    methods:{
      passData(val){
        //触发全局事件globalEvent
        bus.$emit('globalEvent',val)
      }
    }
  })
  Vue.component('brother2',{
    template:`
      <div>
        <p>this is brother2 compoent!</p>
        <p>brother1传递过来的数据：{{brothermessage}}</p>
      </div>
    `,
    data(){
      return {
        mymessage:'hello brother2',
        brothermessage:''
      }
    },
    mounted(){
      //绑定全局事件globalEvent
      bus.$on('globalEvent',(val)=>{
        this.brothermessage=val;
      })
    }
  })
  //中央事件总线
  var bus=new Vue();
  var app=new Vue({
    el:'#app',
    template:`
      <div>
        <brother1></brother1>
        <brother2></brother2>
      </div>
    `
  })

 

 

  • vue-router  大概原理
    vue-router 包括三个组成
    vueRouter :       路由器类，根据请求在视图中动态渲染选中的组件
    router-link :      路由链接组件，
    router-view ：路由视图组件，负责动态渲染路由选中的组件
    前端路由直接找到与地址匹配的一个组件或者对象然后进行渲染
    通过 hash 和 history 两种方式实现

1.   Hash: 通过改变hash值
2.  History: 利用history对象新特性

  • axios怎么使用拦截器，是不是知道支持 node 和浏览器端发送请求，用的什么发送的请求

 

 

 

 

  • vue-cli如何新增自定义指令？
    a. 创建局部指令
    var app = new Vue({
   el: '#app',
   data: {  },
  
// 创建指令(可以多个)
directives: {
/*指令名称*/
    dir1: {
      inserted(el) {
/*指令中第一个参数是当前使用指令的DOM*/
      console.log(el);
      console.log(arguments);
// 对DOM进行操作
    el.style.width = '200px';
    el.style.height = '200px';
    el.style.background = '#000';

   }
  }
 }
})
  • b. 全局指令
  • Vue.directive('dir2', {
  inserted(el) {
     console.log(el);
  }
})

//指令的使用

<div id="app">
<div v-dir1></div>
<div v-dir2></div>
</div>
  • 原型链 和 作用域链，主要表现在寄生组合继承和extends继承的区别和new做了什么。

作用域的特点 ：：先在自己的变量范围中查找，如果找不到，就会沿着作用域往上找。总结有以下两点！
1、函数限定变量作用域,就是说，在JavaScript中，在函数里面定义的变量，可以在函数里面被访问，但是在函数外无法访问
2、在JavaScript中使用变量，JavaScript解释器首先在当前作用域中搜索是否有该变量的定义，如果有，就是用这个变量；如 果没有就到父域中寻找该变量. 由于变量提升,因此在实际开发的时候，推荐将变量都写在开始的地方，也就是在函数的开头将变量就定义好.
原型链：
它也是一种查找机制，实例首先在自己的私有属性种进行查找，如果不是私有属性，基于__proto__向所属类的原型上进行查找，如果再找不到，则继续基于__proto__向上查找，一直找到Object.prototype为止。例如obj.hasOwnproperty这个属性就是找到Object.prototype才找到的
1、所有的函数都继承自 Function.prototype,Function,Object 是函数,所以继承自 Function.prototype
2、所有的对象都直接或间接继承自 Object.prototype,Function.prototype.proto === Object.prototype函数也是对象,所以函数最终继承自Object.prototype
3、Object.prototype 继承自 null,万剑归宗

 


4、vue一些高级特性（比如 自定义 v-model、插槽、mixins、keep-alive、动态组件、异步组件，$nextTick
            自定义 v-model： 负责监听用户的输入事件，从而更新数据，
[参考链接](https://www.jianshu.com/p/20e485cb65d9)

插槽： 自组件用 给父组件做占位符，父组件用 分发内容到自组件占位中 （参考 https://www.cnblogs.com/mandy-dyf/p/11528505.html）
mixins： 是
keep-alive： keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染，配合include使用，使得 keep-alive 中的组件缓存
   动态组件：
让多个组件使用同一个挂载点，并动态切换，这就是动态组件，本文将详细介绍Vue动态组件
通过使用保留的 元素，动态地绑定到它的 is 特性，可以实现动态组件
<component   :is="currentView"></component>

我们之前曾经在一个多标签的界面中使用 is attribute 来切换不同的组件：

<component    v-bind:is="currentTabComponent"></component>

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。


  • <!-- 失活的组件将会被缓存！-->
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>

 


    异步组件：
在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染
$nextTick：
使用场景： 在Vue生命周期的 created() 钩子函数进行的DOM操作一定要放在Vue.nextTick() 的回调函数中
       在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

      与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题


v-if，v-show 区别：

v-if 按照条件是否渲染 ，一次性

v-show 是 display ：block or none 


           vue 常用的修饰符 
一、v-model修饰符
.lazy： 输入框改变，这个数据就会改变，lazy这个修饰符会在光标离开input框才会更新数据：
.trim：输入框过滤首尾的空格：
.number：先输入数字就会限制输入只能是数字，先字符串就相当于没有加number，注意，不是输入框不能输入字符串，是这个数据是数字：

二、事件修饰符
.stop ：  阻止事件冒泡，相当于调用了event.stopPropagation()方法：
.prevent ：阻止默认行为，相当于调用了event.preventDefault()方法，比如表单的提交、a标签的跳转就是默认事件：
.self ：只有元素本身触发时才触发方法，就是只有点击元素本身才会触发。比如一个div里面有个按钮，div和按钮都有事件，我们点击按钮，div绑定的方法也会触发，如果div的click加上self，只有点击到div的时候才会触发，变相的算是阻止冒泡：

.once : 事件只能用一次，无论点击几次，执行一次之后都不会再执行

.capture： 事件的完整机制是捕获-目标-冒泡，事件触发是目标往外冒泡

.sync :  对prop进行双向绑定

.keyCode ：监听按键的指令，具体可以查看vue的键码对应表

.prevent：提交时间不再重载页面，
.stop：阻止单击时间冒泡
.capture：事件监听，事件发生时候调用

 

 

  • 什么是 vue 的计算属性
    在模版中放入太多的逻辑会让模版过重且难以维护，在需要对数据进行复杂处理且可能 多次复用 情况下，尽量采取计算属性的方式，
    好处：1，使得数据处理结构清晰，
    2，依赖于数据，数据更新，处理结果自动更新，
    3 ，计算属性内部 this 指向 vm 实例，
    11，怎么定义 vue-router 的动态路由? 怎么获取传过来的值
    在 router 目录下的 index.js 文件中，对 path 属性加上 /:id ，
    使用 router 对象的 params.id 获取
    12，css只在当前组件起作用
    【答】 ：在style标签中写入scoped 即可，例如：

 

posted on 2021-10-19 22:32  杜宝～  阅读(52)  评论(0)  编辑  收藏  举报

导航