前端常见问题

13pan

已于 2022-07-25 19:38:37 修改

阅读量294

点赞数

文章标签： javascript vue.js 前端

于 2022-07-25 19:35:23 首次发布

本文链接：https://blog.csdn.net/lyp1375032715/article/details/125979007

版权

1. watch和计算属性

computed 是计算属性，它会根据你所依赖的数据动态显示新的计算结果.如果数据要进过复杂的计算逻辑才能得到，推荐使用计算属性。因为当复杂的计算逻辑写在templete中，会造成模板自生过重，并且对页面的可维护性造成很大的困难。

var vm = new Vue({
  el: '#app',
  data: {
    message: 'hello'
  },
  template: `
  <div>
  <p>我是原始值: "{{ message }}"</p>
  <p>我是计算属性的值: "{{ computedMessage}}"</p> // computed 在 DOM 里直接使用不需要调用
  </div>
  `,
  computed: {
    // 计算属性的 getter
    computedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

watch是事件监听，如果一个数据需要被监听并且对数据做一些操作就用 watch。

new Vue({
  data: {
    n: 0,
    obj: {
      a: "a"
    }
  },
    watch: {
    n() {
      console.log("n 变了");
    },
    obj:{
      handler: function (val, oldVal) { 
      console.log("obj 变了")
    },
      deep: true // 该属性设定在任何被侦听的对象的 property 改变时都要执行 handler 的回调，不论其被嵌套多深
    },
    "obj.a":{
      handler: function (val, oldVal) { 
      console.log("obj.a 变了")
    },
      immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用
    }
  }
}).$mount("#app");

注：在定义watch时不可用箭头函数，箭头函数没有this ,它会指向他的父级，但箭头函数的父级是window，不是vue实列。
deep:是深度监听，当对象元素里的内容发生改变时，也会触发该事件
immediata:是立即执行，在页面第一次渲染时就进行监听

2.js数据类型和数据类型检测

js的数据类型分为两类：简单数据类型和复杂数据类型
简单数据类型：number ,string ,null ,undefind ,boolean , symble
复杂数据类型：主要为 array , object , function , 还有正则和日期date

数据类型检测

typeof:用于检测数据类型是什么，在检测简单数据类型时，null会被检测为object；在检测复杂数据类型时除了函数function 都会被检测为object

const num = 1
  console.log(typeof num)

instanceof:用于检测构造函数的prototype属性是否出现在实列对象的原型连上，通俗理解就是检测某个数据是不是某个类型，强调的是是不是。

 <script>
    function Animal(name) {
      this.name = name
    }
    const dog = new Animal('大黄')
    console.log(dog instanceof Animal)
  </script>

construct:检测是由那个构造函数创建的对象，可以检测由字面量创建的对象类型，如果不是字面量创建，只能返回构造函数。

 <script>
    const arr = []
    console.log(arr.constructor === Array)
  </script>

toString:toString是object 的原型属性，当检测的是object 直接调用toString(),若是其它则需要调用call方法

Object.prototype.toString.call(1)

isArray：数组检测特有的方法，检测是否为数组，返回布尔值

const arr = []
Array.isArray(arr)

3.生命周期，父子组件生命周期

生命周期

生命周期就是vue实列从创建到销毁的过程，其中包含，创建，挂载，更新和销毁四个过程。
创建阶段：包含beforCreate代表开始创建实列，created实列创建成功，但还没dom挂载两个阶段。
挂载阶段：包含beforMount挂载之前，mounted挂载之后两个阶段。
更新阶段：包含beforUpdate数据更新，但页面还没更新，update数据更新页面也更新两个阶段。
销毁阶段：包含beforDesfory销毁之前，destroy已经销毁