欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue实例的选项总结

程序员文章站 2022-04-28 20:33:51
一、数据api:https://cn.vuejs.org/v2/api/#%e9%80%89%e9%a1%b9-%e6%95%b0%e6%8d%ae1. data类型:object | functio...

一、数据

api:https://cn.vuejs.org/v2/api/#%e9%80%89%e9%a1%b9-%e6%95%b0%e6%8d%ae

1. data

类型:object | function

限制:组件的定义只接受 function

详细:vue 实例的数据对象。vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)。当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象。

var data = { a: 1 }

// 直接创建一个实例
var vm = new vue({
 data: data
})
vm.a // => 1
vm.$data === data // => true

// vue.extend() 中 data 必须是函数
var component = vue.extend({
 data: function () {
  return { a: 1 }
 }
})

2. computed

类型:{ [key: string]: function | { get: function, set: function } }

详细:计算属性将被混入到 vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 vue 实例。计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果某个依赖 (比如非响应式属性) 在该实例范畴之外,则计算属性是不会被更新的。

var vm = new vue({
 data: { a: 1 },
 computed: {
  // 仅读取
  adouble: function () {
   return this.a * 2
  },
  // 读取和设置
  aplus: {
   get: function () {
    return this.a + 1
   },
   set: function (v) {
    this.a = v - 1
   }
  }
 }
})
vm.aplus  // => 2
vm.aplus = 3
vm.a    // => 2
vm.adouble // => 4

3. methods

类型:{ [key: string]: function }

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

var vm = new vue({
 data: { a: 1 },
 methods: {
  plus: function () {
   this.a++
  }
 }
})
vm.plus()
vm.a // 2

4. watch

类型:{ [key: string]: string | function | object | array }

详细:一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。

5. props

类型:array<string> | object

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

你可以基于对象的语法使用以下选项:

1  type: 可以是下列原生构造函数中的一种:string、number、boolean、array、object、date、function、symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型,否则抛出警告。prop 类型的更多信息在此。

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

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

4  validator: function 自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下,如果该函数返回一个 falsy 的值 (也就是验证失败),一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。

二、dom

api:https://cn.vuejs.org/v2/api/#%e9%80%89%e9%a1%b9-dom

1.el

类型:string | element

限制:只在用 new 创建实例时生效。

详细:

(1)提供一个在页面上已存在的 dom 元素作为 vue 实例的挂载目标。可以是 css 选择器,也可以是一个 htmlelement 实例。

(2)在实例挂载之后,元素可以用 vm.$el 访问。

(3)如果在实例化时存在这个选项,实例将立即进入编译过程,否则,需要显式调用 vm.$mount() 手动开启编译。

提供的元素只能作为挂载点。不同于 vue 1.x,所有的挂载元素会被 vue 生成的 dom 替换。因此不推荐挂载 root 实例到 <html> 或者 <body> 上。

如果 render 函数和 template property 都不存在,挂载 dom 元素的 html 会被提取出来用作模板,此时,必须使用 runtime + compiler 构建的 vue 库。

2.template

类型:string

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

如果值以 # 开始,则它将被用作选择符,并使用匹配元素的 innerhtml 作为模板。常用的技巧是用 <script type="x-template"> 包含模板。

出于安全考虑,你应该只使用你信任的 vue 模板。避免使用其他人生成的内容作为你的模板。

如果 vue 选项中包含渲染函数,该模板将被忽略。

3.render

类型:(createelement: () => vnode) => vnode

详细:字符串模板的代替方案,允许你发挥 javascript 最大的编程能力。该渲染函数接收一个 createelement 方法作为第一个参数用来创建 vnode。

如果组件是一个函数组件,渲染函数还会接收一个额外的 context 参数,为没有实例的函数组件提供上下文信息。

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

4.rendererror

2.2.0 新增

类型:(createelement: () => vnode, error: error) => vnode

详细:只在开发者环境下工作。

当 render 函数遭遇错误时,提供另外一种渲染输出。其错误将会作为第二个参数传递到 rendererror。这个功能配合 hot-reload 非常实用。

示例:

new vue({
 render (h) {
  throw new error('oops')
 },
 rendererror (h, err) {
  return h('pre', { style: { color: 'red' }}, err.stack)
 }
}).$mount('#app')

以上就是vue实例的选项总结的详细内容,更多关于vue 实例选项的资料请关注其它相关文章!

相关标签: VUE 实例 选项