美文网首页
Vue知识点

Vue知识点

作者: xiaolizhenzhen | 来源:发表于2018-05-30 16:11 被阅读0次
1.计算属性和方法的区别

计算属性只有在它的相关依赖发生改变时才会重新求值。

方法会在每次触发重新渲染时,总会再次执行,获取新的值。


<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
  <p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    reversedMessage2: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

以上代码在控制台只要不改变message的值,怎么输出reversedMessage都是!boonuR,但reversedMessage2每次输出都是重新计算渲染的。

2.计算属性和侦听属性的区别

侦听属性是实时观察和响应 Vue 实例上的数据变动,但是当一些数据需要随着其它数据变动而变动时,就可能会写很多个watch导致滥用。

但是计算属性做数据关联变动时就会简洁很多。

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    // 这里即监听firstName,又监听lastName
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  },
  computed: {
    // 这里只需要在用着的时候重新计算即可
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

重新计算开销很大的话,选computed;

不希望有缓存的选methods

3.侦听器的特点

使用 watch 选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。

4.数组和对象更新检测方法

由于 JavaScript 的限制,Vue 不能检测数组和对象属性的添加或删除。

可以实现页面和数组实时更新的检测方法:

  1. Vue.set(vm.items, indexOfItem, newValue)vm.$set(vm.items, indexOfItem, newValue)

  2. vm.items.splice(indexOfItem, 1, newValue)

    一个参数是代表截取数组的长度,返回截取的元素;
    两个参数代表从哪个位置截取几个元素,返回截取的元素;
    三个参数代表从哪个位置截取几个元素,并追加什么元素,返回截取的元素。

可以实现页面和对象实时更新的检测方法:

1)添加单个对象的属性和值

Vue.set(object, key, value)vm.$set(object, key, value)

2)添加多个对象的属性和值

vm.objName = Object.assign({}, vm.objName, {
  key1: value1,
  key2: value2,
  ...
})
5.如何修改端口号
image.png
6.如何跨域请求
image.png

详情参考:vue proxyTable接口跨域请求处理

7.默认执行类似jQ的trigger功能

trigger的替代使用生命周期mounted替代

image.png

详情参考:关于vue2触发点击事件

8.如何获取组件的实例化对象

如果是在父附件中,可以通过ref

<component1 ref="ref1"></component>

在父组件中 this.$refs.ref1

在子组件中通过 this.$parent获取父组件

9.Ajax、fetch 、 axios 的区别

ajax:

最早出现的发送后端请求技术,属于原始js,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱。

axios:

axios不是原生JS的,需要进行安装,它不但可以在客户端使用,也可以在nodejs端使用。Axios也可以在请求和响应阶段进行拦截。同样也是基于promise对象的。

fetch:

fetch号称是AJAX的替代品,是在ES6出现的,使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了,参数有点像jQuery ajax。但是,一定记住fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象。

相关文章

  • 118页Vue面试题总结,为面试提前做准备

    Vue面试题文档内容主要包括vue-cli工程,vue核心知识点,vue-router,vuex,http请求,U...

  • Vue部分基础知识点总结

    Vue基础知识点: 1.Vue:过滤html标签 ----{{{数据名}}}. 2.Vue:单次插值语法: ...

  • vue学习(25)自定义指令

    知识点 1:局部指令new Vue({directives:{指令名,配置对象}})new Vue({direct...

  • Vue知识点合集

    Vue vue.js中el是什么vue 基础知识Vue杂七杂八的知识点(此篇比较老了)指令vue v-text &...

  • 临时

    Vue 常考进阶知识点 这一章节我们将来学习 Vue 的一些经常考到的进阶知识点。这些知识点相对而言理解起来会很有...

  • 学习链接

    vue-router教程总结 vue生命周期和钩子函数 详解vue生命周期 Vue2.0八——知识点整理 vuex...

  • Vue真是太好了 壹万多字的Vue知识点 超详细!

    《Vue真是太好了 壹万多字的Vue知识点 超详细!》 ---- ️️、Vue和其他两大框架的区别 Angular...

  • (十)Vue中的is和操作DOM

    本节知识点 Vue 中的is 问题 (1) Vue中的is属性 vue中is的属性引入是为了解决dom结构中对放入...

  • axios

    1、axios知识点 (1)axios是Vue中的ajax,axios分为1.0版本(Vue-resource)和...

  • (十五)vue中真机测试

    本节知识点 (1)vue中真机测试 真机测试 vue运行在webpackserver服务上,而webpackser...

网友评论

      本文标题:Vue知识点

      本文链接:https://www.haomeiwen.com/subject/naqxsftx.html