data

  Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。实例创建之后,可以通过vm.$data来访问原始数据对象

  为什么组件中的data是一个方法返回一个对象,而不是直接赋值给一个对象?

  因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!

props

  props 可以是数组对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义验证和设置默认值。

type: String、Number、Boolean、Array、Object、Date、Function、Symbol。 会检查一个 prop 是否是给定的类型,否则抛出警告。

    • defaultany

      • 为该 prop 指定一个默认值。如果该 prop 没有被传入,则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
    • required: Boolean

      • 定义该 prop 是否是必填项。在非生产环境中,如果这个值为 truthy 且该 prop 没有被传入的,则一个控制台警告将会被抛出。

    • validator: Function

      • 自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下,如果该函数返回一个 falsy 的值 (也就是验证失败),一个控制台警告将会被抛出。

methods

  methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

  注意不应该使用箭头函数来定义methods函数,this指向不会按照期望指向Vue实例。

watch

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

    • deep: true 深度监听,该回调会在任何被侦听的对象的 property 改变时被调用,不论其被嵌套多深

    • immediate: true 立即执行,该回调将会在侦听开始之后被立即调用

  注意不应该使用箭头函数来定义watcher函数,this指向不会按照期望指向Vue实例。

computed

  计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

  计算属性的结果会被缓存

  注意:如果你为一个计算属性使用了箭头函数,则 this 不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。

computed和watch用法异同

  相同: computed和watch都起到监听/依赖一个数据,并进行处理的作用

  异同computed主要用于对同步数据的处理,watch则主要用于观测某个值的变化去完成一段开销较大的复杂业务逻辑。能用computed的时候优先用computed,避免了多个数据影响其中某个数据时多次调用 watch的尴尬情况。

template

  一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发插槽

  注意:如果 Vue 选项中包含渲染函数,该模板将被忽略

render

  Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,也可以用渲染函数。它比模板更接近编译器。

    Vue.component('anchored-heading', {
     render: function (createElement) {
       return createElement(
         'h' + this.level,   // 标签名称
         this.$slots.default // 子节点数组
      )
    },
     props: {
       level: {
         type: Number,
         required: true
      }
    }
  })

  注意:Vue 选项中的 render 函数若存在,则 Vue 构造函数不会从 template 选项或通过 el选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

vueAPI (data,props,methods,watch,computed,template,render)的更多相关文章

  1. 如何才能学到Qt的精髓——信号槽之间的无关性,提供了绝佳的对象间通讯方式,QT的GUI全是自己的一套,并且完全开源,提供了一个绝好机会窥视gui具体实现

    姚冬,中老年程序员 叶韵.KY Xu.赵奋强 等人赞同 被邀请了很久了,一直在思考,今天终于下决心开始写回答. 这个问题的确是够大的,Qt的代码规模在整个开源世界里也是名列前茅的,这么大的项目其中的精 ...

  2. Vue.js 系列教程 2:组件,Props,Slots

    原文:intro-to-vue-2-components-props-slots 译者:nzbin 这是关于 JavaScript 框架 Vue.js 五个教程的第二部分.在这一部分,我们将学习组件, ...

  3. vue2.0嵌套组件之间的通信($refs,props,$emit)

    vue的一大特色就是组件化,所以组件之间的数据交互是非常重要,而我们经常使用组件之间的通信的方法有:props,$refs和emit. 初识组件之间的通信的属性和方法 props的使用 子组件使用父组 ...

  4. vue中,写在methods里的B方法去调A方法的数据,访问不到?

    今天在写项目的时候,发现了一个京城性忽略的问题,在vue的methods的方法里面定义了两个方法,如下: getTaskList() { api.growthDetails.taskList({ ap ...

  5. 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    1.创建组件的方法   函数组件   class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...

  6. 一个字符串中可能包含a~z中的多个字符,如有重复,如String data="aavzcadfdsfsdhshgWasdfasdf",求出现次数最多的那个字母及次数,如有多个重复的则都求出。

    主要掌握String中的方法 char[] toCharArray()           将此字符串转换为一个新的字符数组. int indexOf(String str)           返回 ...

  7. 【WinForm】“System.Data.SqlClient.SqlConnection”的类型初始值设定项引发异常,无法识别的配置节 system.serviceModel

    出现问题的原因: 在本机上没有出现问题,让一个同事测试的时候,在另外一台电脑上出现连接数据库失败,系统不能打开的问题 在网上搜了一下,有说是数据库连接字符串错误的,有说app.config文件配置不匹 ...

  8. @Data 注解在实体类的使用可省去生成GET,SET方法

    你有没有觉得在每个实体类中都要生成get,set方法很麻烦, 要是需求的变化,需要再加一个字段,添加属性后则又要添加其get,set方法 现有一个很好用的注解能解决这个麻烦 1,idea中装上 lom ...

  9. React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...

随机推荐

  1. mybatis中批量插入的两种方式(高效插入)

    MyBatis简介 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以使用 ...

  2. 虚拟化中虚拟机处理器核数与物理主机cpu的关系

    vCPU,顾名思义,是虚拟CPU. 创建虚拟机时,需要配置vCPU资源. 因此vCPU是虚拟机的部件. 因此脱离VM,谈论vCPU是没有意义的.虚拟化管理系统如何调度vCPU,取决于系统内的虚拟机数目 ...

  3. Java包装类,以及Integer与int之间的比较

    一.Java的基本类型 Java语言中提供了八种基本类型,包括六种数字类型(四个整数型,两个浮点型),一种字符类型,还有一种布尔型. 整数型,包括byte.short.int.long,默认初始值是0 ...

  4. 使用Python定时清理运行超时的pdflatex僵尸进程

    问题 在我们之前的<基于texlive定制chemfig化学式转换Python服务镜像>定制的pdflatex在线转换的镜像已经运行在生产环境了,但是最近总有人反馈服务跑着跑着就慢了,本来 ...

  5. CSP2020 自爆记

    Day -1 - 2020.11.5 发现自己 dp 学得很烂--刷了几道 dp 找找感觉. 晚上死活睡不着,觉得要爆炸了. Day 0 - 2020.11.6 白天在学校觉得人飘了. 傍晚回来拿了准 ...

  6. 51nod 1355 - 斐波那契的最小公倍数(Min-Max 容斥+莫比乌斯反演)

    vjudge 题面传送门 首先我们知道斐波那契数列的 lcm 是不太容易计算的,但是它们的 gcd 非常容易计算--\(\gcd(f_x,f_y)=f_{\gcd(x,y)}\),该性质已在我的这篇博 ...

  7. 调用clapack库注意事项

    寒假期间在自己开发的模型DGOM里成功的用clapack替换了MKL,这里就介绍下遇到的几个坑,希望能够帮助别人少走弯路. 1. 调用clapack函数时注意整数类型为integer. 虽然clapa ...

  8. miRNA 基本知识

    miRNA MicroRNA (miRNA)  是一类内生的.长度约为20-24个核苷酸的小 RNA,其在细胞内具有多种重要的调节作用.每个 miRNA 可以有多个靶基因的表达,而几个 miRNA 也 ...

  9. composer设置阿里云镜像源

    composer设置阿里云镜像源 1. 首先把默认的源给禁用掉 composer config -g secure-http false 2. 再修改镜像源 这里我使用阿里的源 composer co ...

  10. window10快捷键 + 浏览器常用通用快捷键

    一.window10快捷键  1.win+tab   缩小版的显示出桌面打开的所有窗口,然后再结合上下左右键加enter选择想要的窗口:  如果不想选择或者保留原有显示窗口,再按win+tab  或者 ...