vue 3.0 实例property Vue 3.0 实例property

vue 3.0 实例property

Vue 3.0 实例property 是 Vue 的核心概念，它们是实例的属性，可以用来存储数据、计算属性、方法、watcher 等。

Vue 3.0 中的实例property 可以分为三类：data property、computed property 和 methods。

data property 是一个对象，用来存储应用状态。它可以是一个普通的 JavaScript 对象，也可以是一个函数，该函数返回一个对象。data property 中的值可以在模板中使用，也可以在其它实例property 中使用。

// 使用函数返回 data property 的对象
data() {
    return {
        message: 'Hello World'
    }
}

computed property 是一种特殊的 property，它会根据其它 data property 的值进行计算得到新的值。computed property 非常有用，因为它能够根据 data property 自动重新计算新的值，而不需要手动去修改。

// computed property 示例 
computed: { 
    reversedMessage() { 
        return this.message.split('').reverse().join('') 
    } 
}   

methods 是一种特殊的函数，可以在 Vue 实例上直接被调用。methods 里面存储了我们需要在应用中处理逻辑的函数。methods 可以在 template 里面直接使用或者在其它 methods 里面使用。

// methods 示例  
methods: {   // 这里是一个方法   sayHello() {   alert('Hello!')   } } 

Vue 3.0 后引入了 watch API （即 watcher ） ， watcher 是一种特殊的 computed property （即 watcher function ） ，当 data property 的值发生变化时会立即执行 watcher function 中的代码。watcher function 返回一个新的值作为 watcher 的返回值（如果不想返回新值则不必返回）。

// watch API 示例   watch: {   message(newVal, oldVal) {     console.log(`message changed from ${oldVal} to ${newVal}`)   } } 
#$data


类型：Object



详细：


组件实例观察的数据对象。组件实例代理了对其 data 对象 property 的访问。


参考选项 / 数据 - data


#$props


类型：Object



详细：


当前组件接收到的 props 对象。组件实例代理了对其 props 对象 property 的访问。

#$el


类型：any



仅可读



详细：


组件实例使用的根 DOM 元素。
对于使用片段的组件，$el将是Vue用于跟踪组件在DOM中位置的占位符DOM节点。建议使用模板引用直接访问DOM元素，而不是依赖$el。


#$options


类型：Object



仅可读



详细：


用于当前组件实例的初始化选项。需要在选项中包含自定义 property 时会有用处：

  const app = Vue.createApp({
    customOption: "foo",
    created() {
      console.log(this.$options.customOption) // => "foo"
    }
  })

#$parent


类型：Vue instance



仅可读



详细：


父实例，如果当前实例有的话。

#$root


类型：Vue instance



仅可读



详细：


当前组件树的根组件实例。如果当前实例没有父实例，此实例将会是其自己。

#$slots


类型：{ [name: string]: (...args: any[]) => Array<VNode> | undefined }



仅可读



详细：


用来访问被插槽分发的内容。每个具名插槽有其相应的 property (例如：v-slot:foo 中的内容将会在 this.$slots.foo 中被找到)。default property 包括了所有没有被包含在具名插槽中的节点，或 v-slot:default 的内容。

在使用渲染函数书写一个组件时，访问 this.$slots 最有帮助。


示例：


  <blog-post>
    <template v-slot:header>
      <h1>About Me</h1>
    </template>

  
    <template v-slot:default>
      <p>
        Here"s some page content, which will be included in $slots.default.
      </p>
    </template>

  
    <template v-slot:footer>
      <p>Copyright 2020 Evan You</p>
    </template>
  </blog-post>

  const app = Vue.createApp({})

  
  app.component("blog-post", {
    render() {
      return Vue.h("div", [
        Vue.h("header", this.$slots.header()),
        Vue.h("main", this.$slots.default()),
        Vue.h("footer", this.$slots.footer())
      ])
    }
  })


参考



`` 组件



通过插槽分发内容



渲染函数 - 插槽


#$refs


类型：Object
仅可读
详细：


一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例。


参考
模板 refs
特殊 attributes - ref


#$attrs


类型：Object
仅可读
详细：


包含了父作用域中不作为组件 props 或自定义事件。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高阶的组件时非常有用。


参考
非 Prop Attributes