7x1 精读Vue官方文档 - 全局 API__前端__Vue.js
发布于 2 个月前 作者 banyungong 120 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

theme: v-green

精读 Vue 官方文档系列 🎉


全局 API 指的是 Vue 构造函数上提供的静态方法

Vue.extend

  • 该方法用于支持 typescript 的类型声明。
  • 该方法内部返回一个 VueComponent 构造函数,并使用 Vue 构造函数的 _init(option) 方法来初始化传入的组件选项。

总之,该方法可以返回一个组件构造函数的子类,用于生成组件实例。

<template>
  <div id="title-box"></div>
</template>
<script>
import Vue from "vue";
import { compileToFunctions } from "vue-template-compiler";
const CreateDynamicTitle = function (level) {
  return new (Vue.extend({
    name: "Title",
    ...compileToFunctions(`<h${level}>This is H${level}</h${level}>`),
  }))();
};
export default {
  name: "HelloWorld",
  mounted() {
    CreateDynamicTitle(2).$mount("#title-box");
  },
};
</script>

Vue.nextTick

Vue 在异步更新 DOM 完成后会调用该回调函数 callback

在修改数据之后立即使用这个方法,可以获取更新后的 DOM。

 export default Vue.extend({
  name: "HelloWorld",
  async mounted() {
    await Vue.nextTick(() => {console.log(1)});
  },
});   

Vue.set

target 是一个响应式对象。 向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。

注意:Vue组件不能动态添加根级的响应式数据。

Vue.delete

target 是一个响应式对象。 移除响应式对象上的一个响应式成员。

Vue.directive

注册 Vue 全局指令。 可以通过 Vue.directive(id) 返回已经注册的指令对象。

Vue.component

注册全局注册。 也可以根据“组件名”获取指定的全局组件实例。

// 注册组件,传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件,传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })

// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')

Vue.use

安装 Vue.js 插件。 如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。

install 方法调用时,会将 Vue 作为参数传入。

use 方法的最终目的就是调用插件对象的 install 方法,进行插件的安装,插件可以向 Vue 全局添加功能以及绑定数据和资源。

该方法需要在调用 new Vue() 之前被调用。当 install 方法被同一个插件多次调用,插件应该只能被安装一次,具有单例性质。

Vue.mixin

注册全局的混入对象。

自定义组件选项的混入合并策略,可以在 config.optionMergeStrategies 进行配置。

Vue.compile

将模板字符串编译成一个带有 render 函数的对象。

var res = Vue.compile('<div><span>{{ msg }}</span></div>')

new Vue({
  data: {
    msg: 'hello'
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
})

注意:只有完整版的 Vue.js 才自带这个方法,运行时版本需要从 vue-template-compile 中导入。

Vue.observable

Vue 通过 Vue.observable API 暴露了其底层的响应式系统。

让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。所以使用 Vue.observable 方法相当于创建了一个等同于组件的根级的响应式对象。

返回的对象可以直接用于渲染函数计算属性内,并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器,用于简单的场景:

const state = Vue.observable({ count: 0 })

const Demo = {
  render(h) {
    return h('button', {
      on: { click: () => { state.count++ }}
    }, `count is: ${state.count}`)
  }
}

与模板一起使用时,必须要将其附加在组件的 data 选项中。

<template>
  <div>
    {{ state.count }}
  </div>
</template>
<script>
import Vue from "vue";

const state = Vue.observable({ count: 1 });
setInterval(() => {
  state.count++;
}, 1000);

export default Vue.extend({
  name: "HelloWorld",
  data() {
    return {
      state,
    };
  },
});
</script>

🤔 Vue 组件不推荐将已经是响应式的对象加入到 data 选项中,所以我们是否可以通过添加私有前缀 ($,_) 作为 Vue 保留成员的方式是否更合适呢?其次,也可以通过自定义选项的方式来使用这些游离于组件之外的响应式对象。

<template>
  <div>
    {{ $data.$test.count }}
    {{ $options.order.list }}
  </div>
</template>
<script>
import Vue from "vue";

const store = Vue.observable({ count: 0 });
const order = Vue.observable({ list: 1 });
export default Vue.extend({
  name: "HelloWorld",
  data() {
    return {
      $test: store,
    };
  },
  order,
  mounted() {
    setInterval(() => {
      this.$data.$test.count++;
      this.$options.order.list++;
    }, 1000);
  },
});
</script>

注意,受限于代码检查工具,例如 Eslin 等,使用 _ 作为前缀可能无法通过代码检查。

Vue.observableVue.set 的区别在于创建的响应式对象层级不同,Vue.observable 可以创建类似于根级别的响应式对象,而且可以从组件中抽离出来独立存在,用于跨组件的状态共享。

Vue.set 只能向组件实例本身已经存在的可以嵌套(引用类型)的响应式对象中新增响应式成员属性。

import Vue from "vue";

let num = 0;
const store = {
  state: Vue.observable({ count: 0 }),
  setState(action, payload) {
    if (action in this.state) {
      this.state[action] = payload;
    }
  },
};

const CompA = Vue.extend({
  name: "CompA",
  render(c) {
    return c(
      "button",
      {
        on: {
          click: function () {
            store.setState("count", ++num);
          },
        },
      },
      ["click"]
    );
  },
});

const CompB = Vue.extend({
  name: "CompB",
  render(c) {
    return c("div", [store.state.count]);
  },
});

export default Vue.extend({
  name: "HelloWorld",
  components: { CompA ,CompB},
});

Vue.version

返回 Vue 的当前版本号。

这对需要判断 Vue 版本号的工具非常有用。

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: Mottle 原文链接:https://juejin.im/post/6988677615112421389

回到顶部