• vueAPI (data,props,methods,watch,computed,template,render)


    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 模板编译渲染函数。

     

  • 相关阅读:
    325日报
    323日报
    Http请求种类
    http1.1和1.0的区别
    Java EE常用名词
    USEA、HASA、ISA
    基本类型及其封装类型的 == 和 equals()
    AOP中的连接点(Joinpoint)、切点(Pointcut)、增强(Advice)、引介(Introduction)、织入(Weaving)、切面(Aspect)
    B树和B+树
    DNS的寻址过程
  • 原文地址:https://www.cnblogs.com/yaokai729/p/11408934.html
Copyright © 2020-2023  润新知