【Vue 学习】全局 API

写代码的不谷

已于 2023-03-21 00:04:25 修改

阅读量219

点赞数

分类专栏： Vue 文章标签： vue

于 2023-03-17 15:42:56 首次发布

本文链接：https://blog.csdn.net/bugu_hhh/article/details/129622162

版权

Vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、概览

官方文档：全局 API

Vue.extend()
Vue.nextTick()
Vue.set()
Vue.delete()
Vue.directive()
Vue.filter()
Vue.component()
Vue.use()
Vue.mixin()
Vue.compile()
Vue.observable()
Vue.version

二、Vue、Vue实例、组件实例之间的关系

前置知识：

函数有：显式原型对象：prototype
函数的实例有：隐式原型对象：__proto__
原型对象也有原型对象，是一个指向Object的对象，Object的原型属性是null
隐式原型对象永远指向自己缔造者的原型对象，最终指向 object 的 null（理解为函数的原型对象是 Object 的 null）

本来应该是这样的

在这里插入图片描述

但是 vue 做了如下修改

在这里插入图片描述

目的：让 vc 实例可以访问到 Vue 原型上面的属性、方法、、、

所以得出一个重要的内置关系如下

console.log(vc.prototype.__proto__ === Vue.prototype); // true

使用举例

<body>
<div id="app">
    <school></school>
</div>
</body>


<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    Vue.prototype.x = 'x=1';
    Vue.prototype.y = 'y=2';

    const school = Vue.extend({
        template: `
        <div>
            <p>{{ varX }}</p>
            <p>{{ varY }}</p>
        </div>
        `,
        data() {
            return {
                varX: this.x,
                varY: this.y,
            }
        }
    })

    new Vue({
        components: { school },
    }).$mount('#app')
</script>

三、学习

经查阅博客发现，Vue.Xxx() 与 this.$xxx() 本质上是无区别的，仅有引用的方式不同

1. Vue.extend()

使用基础的 Vue 构造器扩展出一个特殊的子构造器，可以理解为子类

// 由 Vue 构造器扩展出来的子构造器，手动调用 Vue.extend()
let helloCom1 = Vue.extend({
    template: '<p>Hello,{{ msg }}</p>',
    data() {
        return {
            msg: 'Walter',
        }
    }
})


// 选项对象，自动调用 Vue.extend()
let helloCom2 = {
    template: '<p>Hello,{{ msg }}</p>',
    data() {
        return {
            msg: 'Walter',
        }
    }
}

2. Vue.component()

注册或获取全局组件

// 引入组件
import HelloWorld from "./components/HelloWorld.vue"


// 注册全局组件
//	- 第一个参数：给定 id，作为组件的名称
//	- 第二个参数：扩展过的Vue构造器、选项对象
Vue.component('HelloWorld', HelloWorld);


// 获取全局组件，始终返回构造器
let helloCom = Vue.use('HelloWorld')
console.log(helloCom)


// 在实例化 Vue 之前注册全局组件
new Vue({
    render: h => h(App),
}).$mount('#app')

3. Vue.nextTick()

在与 Vue.nextTick() 同一代码块的 DOM 结构重新渲染之前，不执行 Vue.nextTick() 里面的代码，而是等 DOM 结构重新渲染之后再执行

知识补充：

vue 为了效率，默认情况下，是执行完一整个函数的内容，才去重新渲染相关的 DOM 结构
像下面的代码是，先发送消息，再执行 this.$refs.inputEdit.focus()，但是此时结构还没有重新渲染，页面还不可编辑，自动获取焦点自然不起效果

handleEdit() {
  // 点击按钮，发送消息，修改 isEdit，使得处于编辑状态
  this.$bus.$emit('sendIsEdit', this.todoObj.id, true)
  // 自动获取焦点
  this.$refs.inputEdit.focus()
}

利用 this.$nextTick(function(){}) 修改之后

handleEdit() {
  // 点击按钮，发送消息，修改 isEdit，使得处于编辑状态
  this.$bus.$emit('sendIsEdit', this.todoObj.id, true)
  // 等着上面的修改已经使得 DOM 结构重新渲染之后在执行下面的代码
  this.$nextTick(() => {
    // 自动获取焦点
    this.$refs.inputEdit.focus()
  })
}

4. Vue.set()

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新

// 响应式对象
let user = {
    id: '001',
    name: 'tom'
}


// 直接赋值：vue 监测不到该属性的变化
user.age = 18


// 调用全局 API：使得 Vue 可以监测到属性的变化
Vue.$set(user, 'hobby', ['game', 'eat'])
this.$set(user, 'hobby', ['game', 'eat'])

5. Vue.directive()

注册或获取全局指令

// 注册单个的全局指令
//	- 第一个参数：自定义指令的id、名称
// 	- 第二个参数：指令绑定后的回调函数
Vue.directive('add8', (element, binding) => {
    element.innerText = binding.value + 8;
})


// 注册多个的全局指令
Vue.directive('my-directive', {
    bind: function () {},
    inserted: function () {},
    update: function () {},
    componentUpdated: function () {},
    unbind: function () {}
})


// 返回已注册的全局指令
let a1 = Vue.directive('add8')
console.log(a1)


// 在实例化 Vue 之前注册全局指令
new Vue({
    render: h => h(App),
}).$mount('#app')

6. Vue.filter()

注册或获取全局过滤器

// 注册全局过滤器
Vue.filter('filter1', (data) => {
    return data + '【全局过滤器1】';
})
Vue.filter('filter2', (data) => {
    return data + '【全局过滤器2】';
})


// 获取全局过滤器
let filter1 = Vue.filter('filter1')
let filter2 = Vue.filter('filter2')
console.log(filter1)
console.log(filter2)


// 在实例化 Vue 之前注册全局过滤器
new Vue({
    render: h => h(App),
}).$mount('#app')

7. Vue.use()

注册插件，需要在调用 new Vue() 之前注册插件

// 引入插件
import printVueVersion from "@/plugins/printVueVersion";


// 注册插件
//	- 首个参数：使用什么插件
//	- 后续参数：传入的数据
Vue.use(printVueVersion, {id: '001', name: 'tom'})


// 在实例化 Vue 之前注册插件
new Vue({
    render: h => h(App),
}).$mount('#app')

8. Vue.mixin()

全局注册一个混入，影响注册之后所有创建的每个 Vue 实例

// 引入配置
import {bugu1, bugu2} from "./common/bugu";


// 混入公共的配置
Vue.mixin(bugu1)
Vue.mixin(bugu2)


// 在实例化 Vue 之前注册混入
new Vue({
    render: h => h(App),
}).$mount('#app')

9. Vue.version

全局属性，查看当前 Vue 的版本号

new Vue({
    render: h => h(App),
    mounted() {
        console.log(Vue.version)
    }
}).$mount('#app')