深海游弋的鱼 – 默默的点滴

Javascript中this指向丢失原因及解决办法详解

大家都知道 JS 中的 this 关键字通常出现在函数或者方法中，用来指向调用该函数或者方法的对象。但是在很多时候 this 的指向却并不总是如我们所愿，这一篇文章就一起来看看到底该如何判断 this 所指向的对象，同时在 this 指向丢失情况下如何恢复。

this指向丢失

相信有过面向对象编程经验的朋友对于 this 的使用不会陌生，来看两个例子

function Student(name) {

    this.name = name;

    this.sayHello = function() {
        console.log(`Hello, my name is ${this.name}`)
    }

}

let zhangsan = new Student('zhangsan');
zhangsan.sayHello(); //Hello, my name is zhangsan

function Student(name) {

this.name = name;

this.sayHello = function() {

console.log(`Hello, my name is ${this.name}`)

}

let zhangsan = new Student('zhangsan');

zhangsan.sayHello(); //Hello, my name is zhangsan

这里的 this 指向的是构造函数生成的对象 zhangsan，对象调用自身的方法 sayHello()，其中的 this 自然不会有什么指向问题。

class People {

    constructor(name, age) {

        this.name = name;

        this.age = age;
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name}, I am ${this.age} years old!`);
    }

}

let xiaofu = new People('xiaofu', 99);

xiaofu.sayHello(); //Hello, my name is xiaofu, I am 99 years old!

class People {

constructor(name, age) {

this.name = name;

this.age = age;

}

sayHello() {

console.log(`Hello, my name is ${this.name}, I am ${this.age} years old!`);

}

let xiaofu = new People('xiaofu', 99);

xiaofu.sayHello(); //Hello, my name is xiaofu, I am 99 years old!

这里只是把构造函数换成了 class 语法的方式，this 指向的是类实例 xiaofu，实例调用自身的方法，其中的 this 也不会有什么指向问题。

但是再看下面这个例子

function Student(name) {

    this.name = name;

    this.sayHello = function() {
        console.log(`Hello, my name is ${this.name}`)
    }

}

let zhangsan = new Student('zhangsan');
// zhangsan.sayHello();
setTimeout(zhangsan.sayHello, 2000); //Hello, my name is

function Student(name) {

this.name = name;

this.sayHello = function() {

console.log(`Hello, my name is ${this.name}`)

}

let zhangsan = new Student('zhangsan');

// zhangsan.sayHello();

setTimeout(zhangsan.sayHello, 2000); //Hello, my name is

注意 setTimeout 的第一个参数是一个函数名，而并不是具体的函数调用。

所以这里并不能直接传递 zhangsan.sayHello()，不然会马上执行。

本意是想等待 2 秒之后再打印，结果打印完发现 this.name 并没有打印出来，this 指向丢失了。按照 this 指向调用函数的对象的逻辑，说明 2 秒后调用 sayHello() 这个方法的已经不是 zhangsan 这个对象了。

如果在方法中打印一下 this，就会发现此时 this 指向的是 Window。也就是说最后一句可以像如下改写

let f = zhangsan.sayHello;

setTimeout(f, 2000);

let f = zhangsan.sayHello;

setTimeout(f, 2000);

执行异步操作的时候是将一个函数丢给浏览器，2 秒以后，浏览器去直接执行该函数。

这时候可以引出一个重要的结论：包含 this 的函数无法在定义的时候，而只有在被真正执行的时候才能知道this指向哪个对象。

再看下面的例子就很容易理解了

function runFunc(func) {

    this.name = 'lisi';

    this.sayHello = func;

}

let lisi = new runFunc(zhangsan.sayHello);

lisi.sayHello(); //Hello, my name is lisi

function runFunc(func) {

this.name = 'lisi';

this.sayHello = func;

}

let lisi = new runFunc(zhangsan.sayHello);

lisi.sayHello(); //Hello, my name is lisi

因为 sayHello 这个方法真正执行的时候是被 lisi 这个对象调用，所以 this 指向的是 lisi 这个对象，this.name 打印了出来也是 lisi。

多重调用以及箭头函数

可能有朋友又要问了，那我直接执行 zhangsan.sayHello() 不也是相当于在 Window 中去执行这个函数吗？

让我们再看下面这个例子

function Student(name) {

    this.name = name;

    this.sayHello = function() {
        console.log(`Hello, my name is ${this.name}`)
    }

    this.info = {
        name:'Nobody',
        sayHello: function() { console.log(this.name) }
    }
}

let zhangsan = new Student('zhangsan');
zhangsan.info.sayHello(); //Nobody

function Student(name) {

this.name = name;

this.sayHello = function() {

console.log(`Hello, my name is ${this.name}`)

}

this.info = {

name:'Nobody',

sayHello: function() { console.log(this.name) }

}

let zhangsan = new Student('zhangsan');

zhangsan.info.sayHello(); //Nobody

这里调用的 sayHello 函数是 info 对象下的，可以看到函数中的 this 指向的是 info 对象，而并不是 zhangsan 对象。这里又可以引出另外一个重要的结论：多重调用下，函数中的 this 只会指向函数的上一级对象。这里函数的上一级对象是 info，所以虽然 zhangsan 中也有一个 name，但是并不会被引用。

但是这里需要注意的是箭头函数。

箭头函数在 ES6 中被引入，写起来简洁明了，但是有一个特点需要注意，就是箭头函数没有独立的 this，其中的this 会自动从上一级继承。

所以如果改写下上面的代码

function Student(name) {

    this.name = name;

    this.sayHello = function() {
        console.log(`Hello, my name is ${this.name}`)
        // console.log(this);
    }

    this.info = {
        name:'Nobody',
        // sayHello:function() { console.log(this.name) }
        sayHello: () => { console.log(this.name) },
        test:this.name
    }

}

let zhangsan = new Student('zhangsan');

zhangsan.info.sayHello(); //zhangsan

console.log(zhangsan.info.test); //zhangsan

function Student(name) {

this.name = name;

this.sayHello = function() {

console.log(`Hello, my name is ${this.name}`)

// console.log(this);

}

this.info = {

name:'Nobody',

// sayHello:function() { console.log(this.name) }

sayHello: () => { console.log(this.name) },

test:this.name

}

let zhangsan = new Student('zhangsan');

zhangsan.info.sayHello(); //zhangsan

console.log(zhangsan.info.test); //zhangsan

可以看出，箭头函数中使用 this 就和直接在 info 中使用 this 效果一样，都是指向 zhangsan 对象。

this指向丢失解决办法

再把话题回到 this 丢失上面来。

想要恢复 this 指向，根本逻辑就是想办法还是让 this 定义时候的对象来调用 this 所在的函数，回到上面的例子就是让 zhangsan 来调用 sayHello()。

有两种方式可以来实现，第一种是多添加一层函数调用

function Student(name) {

    this.name = name;

    this.sayHello = function() {
        console.log(`Hello, my name is ${this.name}`)
    }

}

let zhangsan = new Student('zhangsan');

// zhangsan.sayHello();

setTimeout( function() { zhangsan.sayHello(); }, 2000); //Hello, my name is zhangsan

function Student(name) {

this.name = name;

this.sayHello = function() {

console.log(`Hello, my name is ${this.name}`)

}

let zhangsan = new Student('zhangsan');

// zhangsan.sayHello();

setTimeout( function() { zhangsan.sayHello(); }, 2000); //Hello, my name is zhangsan

这里的最后一句相当于 Window.zhangsan.sayHello()，根据上面的规则，this 指向的是上一级对象，也就是zhangsan，所以可以成功打印出来。

并且这里使用箭头函数同样有效果，因为这里的函数只是起到多加一层包装的作用，并没有实际作用。

这里要特别说明一下特殊情况：

class Student {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }

  delaySayHello() {
    setTimeout(() => {
      this.sayHello();
    }, 2000); //Hello, my name is zhangsan
  }
}

let zhangsan = new Student("zhangsan");

zhangsan.delaySayHello();

class Student {

constructor(name) {

this.name = name;

}

sayHello() {

console.log(`Hello, my name is ${this.name}`);

}

delaySayHello() {

setTimeout(() => {

this.sayHello();

}, 2000); //Hello, my name is zhangsan

}

let zhangsan = new Student("zhangsan");

zhangsan.delaySayHello();

这个情况不是很好理解，为什么箭头函数包装的 this 就可以传递过去？

其实，更方便理解的等价的写法如下：

class Student {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }

  delaySayHello() {
    let keepThis = this;
    setTimeout(() => {
      keepThis.sayHello();
    }, 2000); //Hello, my name is zhangsan
  }
}

let zhangsan = new Student("zhangsan");

zhangsan.delaySayHello();

class Student {

constructor(name) {

this.name = name;

}

sayHello() {

console.log(`Hello, my name is ${this.name}`);

}

delaySayHello() {

let keepThis = this;

setTimeout(() => {

keepThis.sayHello();

}, 2000); //Hello, my name is zhangsan

}

let zhangsan = new Student("zhangsan");

zhangsan.delaySayHello();

注意如下函数：

delaySayHello() {
  let keepThis = this
  setTimeout(() => { keepThis.sayHello(); }, 2000); //Hello, my name is zhangsan
}

delaySayHello() {

let keepThis = this

setTimeout(() => { keepThis.sayHello(); }, 2000); //Hello, my name is zhangsan

}

这样修改会更方便理解。其实本质上箭头函数本质上就是一个对象，这个对象保持了对外部对象的引用，因此不会出现 this 丢失的情况。

第二种方式是利用函数的 bind 方法，使用语法如下

let boundFunc = func.bind(context);

1	let boundFunc = func.bind(context);

这里就是将函数 func 绑定到了 context 这个上下文上，返回一个新的函数。不管被谁调用，这个新的函数里面的this 永远指向 context。

function Student(name) {

    this.name = name;

    this.sayHello = function() {
        console.log(`Hello, my name is ${this.name}`)
    }

}

let zhangsan = new Student('zhangsan');

// zhangsan.sayHello();

setTimeout(zhangsan.sayHello.bind(zhangsan), 2000); //Hello, my name is zhangsan

function Student(name) {

this.name = name;

this.sayHello = function() {

console.log(`Hello, my name is ${this.name}`)

}

let zhangsan = new Student('zhangsan');

// zhangsan.sayHello();

setTimeout(zhangsan.sayHello.bind(zhangsan), 2000); //Hello, my name is zhangsan

这里就是将 sayHello() 这个方法绑定到了 zhangsan 这个对象上，以后不管这个返回的新函数被谁调用，都可以成功返回 zhangsan 中的 this.name。

但是这里要注意的是，只能绑定到构造函数返回的具体对象上，而不能直接绑定到类名 Student 上。

同时要注意 bind 并不支持级联操作

function f() {
  alert(this.name);
}

f = f.bind( {name: "John"} ).bind( {name: "Ann" } );

f(); //John

function f() {

alert(this.name);

}

f = f.bind( {name: "John"} ).bind( {name: "Ann" } );

f(); //John

这里首先将函数f绑定到一个对象，然后马上级联操作绑定到另一个对象，可以看出只有第一个 bind 起了效果。

同时这里也可以看到只有在函数执行的时候才会将 this 指向具体的对象

bind传递函数参数

这里再提一个 bind 方法的进阶用法，就是固定函数传递的一部分参数值，有一点类似 python 中的 partial 函数。因为 bind 方法除了第一个参数是上下文，后面还可以接函数的默认参数值

function Student(name) {

    this.name = name;

    this.sayHello = function(age) {
        console.log(`Hello, my name is ${this.name}, I am ${age} years old.`)
    }

}

let zhangsan = new Student('zhangsan');

setTimeout(zhangsan.sayHello.bind(zhangsan, 99), 2000);

function Student(name) {

this.name = name;

this.sayHello = function(age) {

console.log(`Hello, my name is ${this.name}, I am ${age} years old.`)

}

let zhangsan = new Student('zhangsan');

setTimeout(zhangsan.sayHello.bind(zhangsan, 99), 2000);

这里修改了 sayHello() 方法，必须要传递一个参数，如果想以后每次执行该方法的时候都是传递参数 99 就可以像上面那样。

下面来一个更通用的例子。

有一个需要传递两个参数的函数如下

function intro(age, name) {
    console.log(`Hello, my name is ${name}, I am ${age} years old`);
}

function intro(age, name) {

console.log(`Hello, my name is ${name}, I am ${age} years old`);

}

通过 bind 方法将第一个参数值默认为 99，并返回一个新函数。这里因为没有 context 需要传递，所以第一个参数放 null，不能省略

intro99 = intro.bind(null, 99);

intro99('xiaofu'); //Hello, my name is xiaofu, I am 99 years old

intro99 = intro.bind(null, 99);

intro99('xiaofu'); //Hello, my name is xiaofu, I am 99 years old

注意这里只能是按照参数的先后顺序进行默认值传递，例如这里就不能跨过 age 给 name 传递默认值。

总结

JS 中的 this 使用起来并不像其他 OOP 语言中的类似关键字方便（例如 python 中的 self），因为有指代丢失的问题出现，只能是在实际使用的时候多多练习，熟能生巧了。

参考链接

Javascript中this指向丢失原因及解决办法详解

Compare Arrays in JavaScript

HarmonyOS NEXT 系统推荐使用 Lodash 库，更符合开发直觉。

ohpm install lodash

1	ohpm install lodash

Arrays are objects in JavaScript, so the triple equals operator === only returns true if the arrays are the same reference.

const a = [1, 2, 3];
const b = [1, 2, 3];

a === a; // true
a === b; // false

const a = [1, 2, 3];

const b = [1, 2, 3];

a === a; // true

a === b; // false

How do you compare whether two arrays are equal? Equality is a tricky subject: the JavaScript spec defines 4 different ways of checking if two values are "equal", and that doesn't take into account deep equality between objects.

In cases like this, it helps to be as explicit as possible about what you mean by "equal." In software engineering, asking a question in the right way often makes the answer obvious.

With that in mind, here's 3 definitions of equality for arrays and how to check them.

Same Length, Each Value Equal

One approach for comparing a and b is checking if each value of a is strictly equal to the corresponding value of b. This works well if all the elements of the arrays are primitives as opposed to objects.

const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [1, 2, 3];

function arrayEquals(a, b) {
  return Array.isArray(a) &&
    Array.isArray(b) &&
    a.length === b.length &&
    a.every((val, index) => val === b[index]);
}

arrayEquals(a, b); // false
arrayEquals(a, c); // true

const a = [1, 2, 3];

const b = [4, 5, 6];

const c = [1, 2, 3];

function arrayEquals(a, b) {

return Array.isArray(a) &&

Array.isArray(b) &&

a.length === b.length &&

a.every((val, index) => val === b[index]);

}

arrayEquals(a, b); // false

arrayEquals(a, c); // true

Deep Equality With POJOs

The previous arrayEquals() function works great for primitive values, but falls short if you want to compare objects by value.

const a = [{ answer: 42 }, { powerLevel: 9001 }];
const b = [{ answer: 42 }, { powerLevel: 9001 }];

// false, because { answer: 42 } !== { answer: 42 }, different references
arrayEquals(a, b);

const a = [{ answer: 42 }, { powerLevel: 9001 }];

const b = [{ answer: 42 }, { powerLevel: 9001 }];

// false, because { answer: 42 } !== { answer: 42 }, different references

arrayEquals(a, b);

One neat way to take into account object values is comparing arrays by their JSON.stringify() output.

const a = [{ answer: 42 }, { powerLevel: 9001 }];
const b = [{ answer: 42 }, { powerLevel: 9001 }];
const c = [{ answer: 42 }, { password: 'taco' }];

JSON.stringify(a) === JSON.stringify(b); // true
JSON.stringify(a) === JSON.stringify(c); // false

const a = [{ answer: 42 }, { powerLevel: 9001 }];

const b = [{ answer: 42 }, { powerLevel: 9001 }];

const c = [{ answer: 42 }, { password: 'taco' }];

JSON.stringify(a) === JSON.stringify(b); // true

JSON.stringify(a) === JSON.stringify(c); // false

This approach is handy because it requires minimal code and no outside libraries. However, comparing JSON.stringify() output has an unfortunate edge case that may be a problem depending on your use case. Since undefined isn't a valid JSON value, the below arrays have the same JSON.stringify() output, because JSON.stringify() converts undefined to null.

const a = [undefined];
const b = [null];

1 2	const a = [undefined]; const b = [null];

Using Lodash's `isEqual()`

In addition to the null vs undefined quirk, comparing JSON.stringify() output also doesn't take into account object types. As far as JSON.stringify() is concerned, an object with a toJSON() function that returns 42 is the same as the number 42.

const a = [{ toJSON: () => 42 }];
const b = [42];

JSON.stringify(a); // '[42]'
JSON.stringify(b); // '[42]'

const a = [{ toJSON: () => 42 }];

const b = [42];

JSON.stringify(a); // '[42]'

JSON.stringify(b); // '[42]'

Similarly, a custom object is the same as a POJO:

class MyClass {
  constructor(obj) {
    Object.assign(this, obj);
  }
}

const a = [new MyClass({ answer: 42 })];
const b = [{ answer: 42 }];

JSON.stringify(a) === JSON.stringify(b); // true

class MyClass {

constructor(obj) {

Object.assign(this, obj);

}

const a = [new MyClass({ answer: 42 })];

const b = [{ answer: 42 }];

JSON.stringify(a) === JSON.stringify(b); // true

Lodash's isEqual() function, on the other hand, takes all this into account.

const _ = require('lodash');

class MyClass {
  constructor(obj) {
    Object.assign(this, obj);
  }
}

const a = [new MyClass({ answer: 42 })];
const b = [{ answer: 42 }];

_.isEqual(a, b); // false

const _ = require('lodash');

class MyClass {

constructor(obj) {

Object.assign(this, obj);

}

const a = [new MyClass({ answer: 42 })];

const b = [{ answer: 42 }];

_.isEqual(a, b); // false

Lodash's isEqual() function is the way to go if you need all the bells and whistles of checking that objects have the same class. The JSON.stringify() approach works well for POJOs, just make sure you take into account null and only use it with trusted data - toJSON() can be a security vulnerability.

参考链接

Compare Arrays in JavaScript

vue3的provide和inject

浅析

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

定义说明：这对选项是一起使用的。以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

通俗的说就是：组件得引入层次过多，我们的子孙组件想要获取祖先组件得资源，那么怎么办呢，总不能一直取父级往上吧，而且这样代码结构容易混乱。这个就是这对选项要干的事情。

provide：是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。

inject：一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。

一句话介绍：provide可以向所有子孙组件提供数据以及提供修改数据的方法，子孙组件用inject使用数据。

在组合式API中的用法

基本用法

似乎，组合式API的provide没有提供批量方法，只能每个变量写一句。

顶级组件：

<template>
  <div>
    <son />
  </div>
</template>

<script setup>
import son from "./son.vue";
import { provide } from "vue";
provide("abc", "123");
</script>

<div>

<son />

</div>

</template>

import son from "./son.vue";

import { provide } from "vue";

provide("abc", "123");

</script>

子组件：

<template>
  <div>
    <grandson />
  </div>
</template>

<script setup>
import grandson from "./grandson.vue";
</script>

<div>

</div>

</template>

import grandson from "./grandson.vue";

</script>

孙组件：

<template>
  <div>我是孙子</div>
</template>

<script setup&gt;
import { inject } from "vue";
const abc = inject("abc");
console.log(abc);
</script>

</template>

import { inject } from "vue";

const abc = inject("abc");

console.log(abc);

</script>

官方说：

inject() can only be used inside setup() or functional components.

这个意思是说，inject()只能放在setup()生命周期里运行，不能放在别的周期里运行，也不能放在事件周期里运行。所以你可以先在setup()周期取值。

例一：这是允许的，因为console.log是setup()生命周期里的同步代码

function xx() {
  console.log(inject("abc"))
}
xx()

function xx() {

console.log(inject("abc"))

}

xx()

例三：让例一的xx函数作为鼠标事件回调，也是禁止的，原因也一样。

例四：放在Promise.then()也是禁止的，比如：

Promise.resolve().then(() => {
  console.log(inject("abc"))
})

Promise.resolve().then(() => {

console.log(inject("abc"))

})

一级组件修改数据，孙子组件监听变更

provide的变量必须是响应式变量，孙子组件监听的变量也必须是响应式变量。

一级组件：

<template>
  <div>
    <son />
    <button @click="abc = '456'">{{ abc }}</button>
  </div>
</template>

<script setup>
import son from "./son.vue";
import { provide } from "vue";
ref: abc = "123";
provide("abc", $abc);
</script>

<div>

<son />

</div>

</template>

import son from "./son.vue";

import { provide } from "vue";

ref: abc = "123";

provide("abc", $abc);

</script>

孙子组件：

<template>
  <div>我是孙子 - {{abc}}</div>
</template>

<script setup>
import { inject, watch } from "vue";
ref: abc = inject("abc");
watch($abc, () => {
  console.log(abc + '变了');
});
</script>

</template>

import { inject, watch } from "vue";

ref: abc = inject("abc");

watch($abc, () => {

console.log(abc + '变了');

});

</script>

孙子组件修改数据，一级组件监听变更

一级组件除了提供数据，还要提供一个修改数据的方法，孙子组件要接收并使用这个方法，这样修改的就是一级组件的数据，修改之后又会影响孙子组件的数据。

一级组件：

<template>
  <div>
    <son />
    <button @click="abc = '456'">{{ abc }}</button>
  </div>
</template>

<script setup>
import son from "./son.vue";
import { provide } from "vue";
ref: abc = "123";
function updateAbc(val) {
  abc = val;
}
provide("abc", $abc);
provide("updateAbc", updateAbc);
</script>

<div>

<son />

</div>

</template>

import son from "./son.vue";

import { provide } from "vue";

ref: abc = "123";

function updateAbc(val) {

abc = val;

}

provide("abc", $abc);

provide("updateAbc", updateAbc);

</script>

孙子组件：

<template>
  <div @click="updateAbc('789')">我是孙子 - {{abc}}</div>
</template>

<script setup>
import { inject, watch } from "vue";
ref: abc = inject("abc");
const updateAbc = inject('updateAbc');
watch($abc, () => {
  console.log(abc + '变了');
});
</script>

</template>

import { inject, watch } from "vue";

ref: abc = inject("abc");

const updateAbc = inject('updateAbc');

watch($abc, () => {

console.log(abc + '变了');

});

</script>

禁止孙子组件修改一级组件的数据

禁止的话，一级组件传递的变量必须是只读的，可以是readonly，也可以是shallowRef。这样孙子组件修改数据的话，一级组件不会有反应。

一级组件：

<template>
  <div>
    <son />
    <button @click="abc = '456'">{{ abc }}</button>
  </div>
</template>

<script setup>
import son from "./son.vue";
import { shallowRef, provide } from "vue";
let abc = shallowRef("123");
function updateAbc(val) {
  abc = val;
}
provide("abc", abc);
provide("updateAbc", updateAbc);
</script>

<div>

<son />

</div>

</template>

import son from "./son.vue";

import { shallowRef, provide } from "vue";

let abc = shallowRef("123");

function updateAbc(val) {

abc = val;

}

provide("abc", abc);

provide("updateAbc", updateAbc);

</script>

在配置项式API中的用法

跟Vue 2差不多，简单说一下。

provide

provide语法比在组合式API里要灵活，毕竟可以用对象。比如：

provide: {
    user: 'John Doe',
 },

provide: {

user: 'John Doe',

如果要把data里的数据provide，说白了就是打算用this，provide要写成函数：

provide() {
    return {
      user: this.user,
      updateUser: this.updateUser
   }
},

provide() {

return {

user: this.user,

updateUser: this.updateUser

}

如果要提供计算属性，也是一样的道理，不过，如果不打算用配置项式计算属性，而是想用vue的computed方法

可以写成：

provide() {
    return {
      userLength: computed(() => this.user.length),
      updateUser: this.updateUser
    }
},

provide() {

return {

userLength: computed(() => this.user.length),

updateUser: this.updateUser

}

inject

inject的用法更简单，比如inject: ['user', 'updateUser']。

双向修改而且响应 想要双向修改而且响应，就必须借助reactive或者ref家族方法和computed方法。provide的数据必须是computed返回的数据，才能保证数据有变化时刷新孙子组件的数据。孙子组件要用computed + unref来解包装且计算属性，才能得到真正需要的数据。

可以看到，由于孙子组件的inject和computed的属性不能重名，所以我造出一个abcabc变量名，这就比较麻烦了。我们再看组合式API，就没有abcabc这种中间变量，原因是ref: abc = inject("abc");让接收和加响应式一气呵成，这也是组合式API的优势之一。

一级组件：

<template>
  <div>
    <son />
    <button @click="abc = '456'">{{ abc }}</button>
  </div>
</template>

<script>
import son from "./son.vue";
import { ref, shallowRef, computed, provide } from "vue";
export default {
  components: {
    son,
  },
  data() {
    return {
      abc: 123,
    }
  },
  provide() {
    return {
      abcabc: computed(() => this.abc),
      updateAbc: this.updateAbc
    }
  },
  methods: {
    updateAbc(val) {
      this.abc = val;
    }
  }
}
</script>

<div>

<son />

</div>

</template>

import son from "./son.vue";

import { ref, shallowRef, computed, provide } from "vue";

export default {

components: {

son,

data() {

return {

abc: 123,

}

provide() {

return {

abcabc: computed(() => this.abc),

updateAbc: this.updateAbc

}

methods: {

updateAbc(val) {

this.abc = val;

}

</script>

孙子组件：

<template>
  <div @click="updateAbc('789')">我是孙子 - {{ abc }}</div>
</template>

<script>
import { unref } from "vue";

export default {
  inject: ["abcabc", "updateAbc"],
  computed: {
    abc() {
      return unref(this.abcabc);
    },
  },
};
</script>

</template>

import { unref } from "vue";

export default {

inject: ["abcabc", "updateAbc"],

computed: {

abc() {

return unref(this.abcabc);

};

</script>

参考链接

vue3的provide和inject

vue3 -- @vue/compiler-sfc 单文件转换工具

@vue/compiler-sfc

"version": "3.2.37"

SFC是vue中重要的一环，也是vue3中对于静态节点进行缓存提升的重要位置

SFC -- single file Component 单文件组件，以 .vue 进行结尾，这个文件浏览器也不会识别，最终也是要被转换成js代码

SFC中包含三块，template、script、style等三块代码，分别表示模版、脚本、样式三块

@vue/compiler-sfc的作用就是把单文件组件编译成为js代码

parse

下面就看一看具体的使用

新建一个Foo.vue组件

<template>
    <input type="text" v-model="name">
</template>
<script lang='ts'>
import { defineComponent, ref } from 'vue'
export default defineComponent({
    name: 'foo',
    setup() {
        return {
            name: ref('jack')
        }
    }
})
</script>
<style lang="scss">
input {
    color: #333;
}
</style>

</template>

import { defineComponent, ref } from 'vue'

export default defineComponent({

setup() {

return {

}

})

</script>

input {

color: #333;

}

</style>

组件同时包括template、script、style三块

新建一个nodejs脚本

const { parse } = require("@vue/compiler-sfc")
const fs = require("fs")
fs.readFile("./foo.vue", (err, data) => {

    let parsed = parse(data.toString(), {
        filename: 'foo.vue'
    })
    console.log('parsed', parsed);

})

const { parse } = require("@vue/compiler-sfc")

const fs = require("fs")

fs.readFile("./foo.vue", (err, data) => {

let parsed = parse(data.toString(), {

filename: 'foo.vue'

})

console.log('parsed', parsed);

})

用fs读取到文件的内容后，使用parse解析, 最终会返回一个对象

{
  descriptor: {
    filename: 'foo.vue',
    source: '<template>\n' +
      '    <input type="text" v-model="name">\n' +
      '</template>\n' +
      "<script lang='ts'>\n" +
      "import { defineComponent, ref } from 'vue'\n" +
      'export default defineComponent({\n' +
      "    name: 'foo',\n" +
      '    setup() {\n' +
      '        return {\n' +
      "            name: ref('jack')\n" +
      '        }\n' +
      '    }\n' +
      '})\n' +
      '</script>\n' +
      '<style lang="scss">\n' +
      'input {\n' +
      '    color: #333;\n' +
      '}\n' +
      '</style>\n',
    template: {
      type: 'template',
      content: '\n    <input type="text" v-model="name">\n',
      loc: [Object],
      attrs: {},
      ast: [Object],
      map: [Object]
    },
    script: {
      type: 'script',
      content: '\n' +
        "import { defineComponent, ref } from 'vue'\n" +
        'export default defineComponent({\n' +
        "    name: 'foo',\n" +
        '    setup() {\n' +
        '        return {\n' +
        "            name: ref('jack')\n" +
        '        }\n' +
        '    }\n' +
        '})\n',
      loc: [Object],
      attrs: [Object],
      lang: 'ts',
      map: [Object]
    },
    scriptSetup: null,
    styles: [ [Object] ],
    customBlocks: [],
    cssVars: [],
    slotted: false,
    shouldForceReload: [Function: shouldForceReload]
  },
  errors: []
}

{

descriptor: {

filename: 'foo.vue',

source: '<template>\n' +

' <input type="text" v-model="name">\n' +

'</template>\n' +

"<script lang='ts'>\n" +

"import { defineComponent, ref } from 'vue'\n" +

'export default defineComponent({\n' +

" name: 'foo',\n" +

' setup() {\n' +

' return {\n' +

" name: ref('jack')\n" +

' }\n' +

'})\n' +

'</script>\n' +

'<style lang="scss">\n' +

'input {\n' +

' color: #333;\n' +

'}\n' +

'</style>\n',

type: 'template',

content: '\n <input type="text" v-model="name">\n',

loc: [Object],

attrs: {},

ast: [Object],

map: [Object]

script: {

type: 'script',

content: '\n' +

"import { defineComponent, ref } from 'vue'\n" +

'export default defineComponent({\n' +

" name: 'foo',\n" +

' setup() {\n' +

' return {\n' +

" name: ref('jack')\n" +

' }\n' +

'})\n',

loc: [Object],

attrs: [Object],

lang: 'ts',

map: [Object]

scriptSetup: null,

styles: [ [Object] ],

customBlocks: [],

cssVars: [],

slotted: false,

shouldForceReload: [Function: shouldForceReload]

errors: []

}

setup脚本改造foo.vue

<template>
    <input type="text" v-model="name">
</template>
<script lang='ts' setup>
import { ref } from 'vue'

const name = ref('jack');
</script>
<style lang="scss">
input {
    color: #333;
}
</style>

</template>

import { ref } from 'vue'

const name = ref('jack');

</script>

input {

color: #333;

}

</style>

setup语法编译后的结果

{
  descriptor: {
    filename: 'foo.vue',
    source: '<template>\n' +
      '    <input type="text" v-model="name">\n' +
      '</template>\n' +
      "<script lang='ts' setup>\n" +
      "import { ref } from 'vue'\n" +
      '\n' +
      "const name = ref('jack');\n" +
      '</script>\n' +
      '<style lang="scss">\n' +
      'input {\n' +
      '    color: #333;\n' +
      '}\n' +
      '</style>\n',
    template: {
      type: 'template',
      content: '\n    <input type="text" v-model="name">\n',
      loc: [Object],
      attrs: {},
      ast: [Object],
      map: [Object]
    },
    script: null,
    scriptSetup: {
      type: 'script',
      content: "\nimport { ref } from 'vue'\n\nconst name = ref('jack');\n",
      loc: [Object],
      attrs: [Object],
      lang: 'ts',
      setup: true
    },
    styles: [ [Object] ],
    customBlocks: [],
    cssVars: [],
    slotted: false,
    shouldForceReload: [Function: shouldForceReload]
  },
  errors: []
}

{

descriptor: {

filename: 'foo.vue',

source: '<template>\n' +

' <input type="text" v-model="name">\n' +

'</template>\n' +

"<script lang='ts' setup>\n" +

"import { ref } from 'vue'\n" +

'\n' +

"const name = ref('jack');\n" +

'</script>\n' +

'<style lang="scss">\n' +

'input {\n' +

' color: #333;\n' +

'}\n' +

'</style>\n',

type: 'template',

content: '\n <input type="text" v-model="name">\n',

loc: [Object],

attrs: {},

ast: [Object],

map: [Object]

script: null,

scriptSetup: {

type: 'script',

content: "\nimport { ref } from 'vue'\n\nconst name = ref('jack');\n",

loc: [Object],

attrs: [Object],

lang: 'ts',

setup: true

styles: [ [Object] ],

customBlocks: [],

cssVars: [],

slotted: false,

shouldForceReload: [Function: shouldForceReload]

errors: []

}

唯一的不同就是编译后的结果从原来的script上迁移到scriptSetup上

compileTemplate

拿到之前parse后的结果后，需要对template进行进一步的转换，把template结果进一步编译成对应的js vnode函数

let compileredTemplate = compileTemplate({
    id: '123',
    filename: 'foo.vue',
    source: parsed.descriptor.template.content
})
console.log('parsed', compileredTemplate);

let compileredTemplate = compileTemplate({

id: '123',

filename: 'foo.vue',

source: parsed.descriptor.template.content

})

console.log('parsed', compileredTemplate);

其中code的值就是最终模版编译的结果

{
  code: 'import { vModelText as _vModelText, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"\n' +
    '\n' +
    'export function render(_ctx, _cache) {\n' +
    '  return _withDirectives((_openBlock(), _createElementBlock("input", {\n' +
    '    type: "text",\n' +
    '    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((_ctx.name) = $event))\n' +
    '  }, null, 512 /* NEED_PATCH */)), [\n' +
    '    [_vModelText, _ctx.name]\n' +
    '  ])\n' +
    '}',
  ast: {
    type: 0,
    children: [ [Object] ],
    helpers: [
      Symbol(vModelText),
      Symbol(withDirectives),
      Symbol(openBlock),
      Symbol(createElementBlock)
    ],
    components: [],
    directives: [],
    hoists: [],
    imports: [],
    cached: 1,
    temps: 0,
    codegenNode: {
      type: 13,
      tag: '"input"',
      props: [Object],
      children: undefined,
      patchFlag: '512 /* NEED_PATCH */',
      dynamicProps: undefined,
      directives: [Object],
      isBlock: true,
      disableTracking: false,
      isComponent: false,
      loc: [Object]
    },
    loc: {
      start: [Object],
      end: [Object],
      source: '\n    <input type="text" v-model="name">\n'
    },
    filters: []
  },
  preamble: '',
  source: '\n    <input type="text" v-model="name">\n',
  errors: [],
  tips: [],
  map: {
    version: 3,
    sources: [ 'foo.vue' ],
    names: [ 'name' ],
    mappings: ';;;wCACI,oBAAkC;IAA3B,IAAI,EAAC,MAAM;IADtB,6DACgCA,SAAI;;kBAAJA,SAAI',
    sourcesContent: [ '\n    <input type="text" v-model="name">\n' ]
  }
}

{

code: 'import { vModelText as _vModelText, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"\n' +

'\n' +

'export function render(_ctx, _cache) {\n' +

' return _withDirectives((_openBlock(), _createElementBlock("input", {\n' +

' type: "text",\n' +

' "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((_ctx.name) = $event))\n' +

' }, null, 512 /* NEED_PATCH */)), [\n' +

' [_vModelText, _ctx.name]\n' +

' ])\n' +

'}',

ast: {

type: 0,

children: [ [Object] ],

helpers: [

Symbol(vModelText),

Symbol(withDirectives),

Symbol(openBlock),

Symbol(createElementBlock)

components: [],

directives: [],

hoists: [],

imports: [],

cached: 1,

temps: 0,

codegenNode: {

type: 13,

tag: '"input"',

props: [Object],

children: undefined,

patchFlag: '512 /* NEED_PATCH */',

dynamicProps: undefined,

directives: [Object],

isBlock: true,

disableTracking: false,

isComponent: false,

loc: [Object]

loc: {

start: [Object],

end: [Object],

source: '\n <input type="text" v-model="name">\n'

filters: []

preamble: '',

source: '\n <input type="text" v-model="name">\n',

errors: [],

tips: [],

map: {

version: 3,

sources: [ 'foo.vue' ],

names: [ 'name' ],

mappings: ';;;wCACI,oBAAkC;IAA3B,IAAI,EAAC,MAAM;IADtB,6DACgCA,SAAI;;kBAAJA,SAAI',

sourcesContent: [ '\n <input type="text" v-model="name">\n' ]

}

我们把结果单独拿出来看下

import { vModelText as _vModelText, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

export function render(_ctx, _cache) {
    return _withDirectives((_openBlock(), _createElementBlock("input", {
        type: "text",
        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((_ctx.name) = $event))
    }, null, 512 /* NEED_PATCH */)), [
        [_vModelText, _ctx.name]
    ])
}

import { vModelText as _vModelText, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

export function render(_ctx, _cache) {

return _withDirectives((_openBlock(), _createElementBlock("input", {

type: "text",

"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((_ctx.name) = $event))

}, null, 512 /* NEED_PATCH */)), [

[_vModelText, _ctx.name]

])

}

最终返回了一个render函数，这里也就符合预期，vue组件中如果使用js的方式写，可以写一个render函数去渲染组件

compilerScript

根据parsed的结果来解析脚本部分，compileScript接收2个参数，第一个就是之前parse的结果，然后再传入相应的option

let compileredScript = compileScript(parsed.descriptor, {
    id: '123'
})
console.log('parsed', compileredScript);

let compileredScript = compileScript(parsed.descriptor, {

id: '123'

})

console.log('parsed', compileredScript);

编译后的结果，content就是最终编译出的代码

{
  type: 'script',
  content: "import { defineComponent as _defineComponent } from 'vue'\n" +
    "import { ref } from 'vue'\n" +
    '\n' +
    '\n' +
    'export default /*#__PURE__*/_defineComponent({\n' +
    '  setup(__props, { expose }) {\n' +
    '  expose();\n' +
    '\n' +
    "const name = ref('jack');\n" +
    '\n' +
    'const __returned__ = { name }\n' +
    "Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true })\n" +
    'return __returned__\n' +
    '}\n' +
    '\n' +
    '})',
  loc: {
    source: "\nimport { ref } from 'vue'\n\nconst name = ref('jack');\n",
    start: { column: 25, line: 4, offset: 86 },
    end: { column: 1, line: 8, offset: 140 }
  },
  attrs: { lang: 'ts', setup: true },
  lang: 'ts',
  setup: true,
  bindings: { ref: 'setup-const', name: 'setup-ref' },
  imports: [Object: null prototype] {
    ref: {
      isType: false,
      imported: 'ref',
      source: 'vue',
      isFromSetup: true,
      isUsedInTemplate: false
    }
  },
  map: SourceMap {
    version: 3,
    file: null,
    sources: [ 'foo.vue' ],
    sourcesContent: [
      '<template>\n' +
        '    <input type="text" v-model="name">\n' +
        '</template>\n' +
        "<script lang='ts' setup>\n" +
        "import { ref } from 'vue'\n" +
        '\n' +
        "const name = ref('jack');\n" +
        '</script>\n' +
        '<style lang="scss">\n' +
        'input {\n' +
        '    color: #333;\n' +
        '}\n' +
        '</style>\n'
    ],
    names: [],
    mappings: ';AAIA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACzB;;;;;AAFwB;AAGxB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;;'
  },
  scriptAst: undefined,
  scriptSetupAst: [
    Node {
      type: 'ImportDeclaration',
      start: 1,
      end: 26,
      loc: [SourceLocation],
      importKind: 'value',
      specifiers: [Array],
      source: [Node]
    },
    Node {
      type: 'VariableDeclaration',
      start: 28,
      end: 53,
      loc: [SourceLocation],
      declarations: [Array],
      kind: 'const'
    }
  ]
}

{

type: 'script',

content: "import { defineComponent as _defineComponent } from 'vue'\n" +

"import { ref } from 'vue'\n" +

'\n' +

'export default /*#__PURE__*/_defineComponent({\n' +

' setup(__props, { expose }) {\n' +

' expose();\n' +

'\n' +

"const name = ref('jack');\n" +

'\n' +

'const __returned__ = { name }\n' +

"Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true })\n" +

'return __returned__\n' +

'}\n' +

'\n' +

'})',

loc: {

source: "\nimport { ref } from 'vue'\n\nconst name = ref('jack');\n",

start: { column: 25, line: 4, offset: 86 },

end: { column: 1, line: 8, offset: 140 }

attrs: { lang: 'ts', setup: true },

lang: 'ts',

setup: true,

bindings: { ref: 'setup-const', name: 'setup-ref' },

imports: [Object: null prototype] {

ref: {

isType: false,

imported: 'ref',

source: 'vue',

isFromSetup: true,

isUsedInTemplate: false

}

map: SourceMap {

version: 3,

file: null,

sources: [ 'foo.vue' ],

sourcesContent: [

'<template>\n' +

' <input type="text" v-model="name">\n' +

'</template>\n' +

"<script lang='ts' setup>\n" +

"import { ref } from 'vue'\n" +

'\n' +

"const name = ref('jack');\n" +

'</script>\n' +

'<style lang="scss">\n' +

'input {\n' +

' color: #333;\n' +

'}\n' +

'</style>\n'

names: [],

mappings: ';AAIA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACzB;;;;;AAFwB;AAGxB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;;'

scriptAst: undefined,

scriptSetupAst: [

Node {

type: 'ImportDeclaration',

start: 1,

end: 26,

loc: [SourceLocation],

importKind: 'value',

specifiers: [Array],

source: [Node]

Node {

type: 'VariableDeclaration',

start: 28,

end: 53,

loc: [SourceLocation],

declarations: [Array],

kind: 'const'

}

]

}

content格式化之后的结果，所以说setup只是语法糖，最终还是以defineComponent去包裹一个对象进行返回的形式

import { defineComponent as _defineComponent } from 'vue'
import { ref } from 'vue'


export default /*#__PURE__*/_defineComponent({
    setup(__props, { expose }) {
        expose();

        const name = ref('jack');

        const __returned__ = { name }
        Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true })
        return __returned__
    }

})

import { defineComponent as _defineComponent } from 'vue'

import { ref } from 'vue'

export default /*#__PURE__*/_defineComponent({

setup(__props, { expose }) {

expose();

const name = ref('jack');

const __returned__ = { name }

Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true })

return __returned__

}

})

compileStyle

compileStyle 即解析SFC style模块的入口函数

由于sfc中style块是可以写多个的，所以parse最终的结果styles其实是个数组

由变量签名也可以看出

export interface SFCDescriptor {
  // ....
  styles: SFCStyleBlock[]
  
}

export interface SFCDescriptor {

// ....

styles: SFCStyleBlock[]

}

这里我们取第一个块打印出来看一下，实际情况下应该是去循环的

let compileredStyle = compileStyle({
    source: parsed.descriptor.styles[0].content,
    scoped: true,
    id: 'data-v-123'
})
console.log('parsed', compileredStyle);

let compileredStyle = compileStyle({

source: parsed.descriptor.styles[0].content,

scoped: true,

id: 'data-v-123'

})

console.log('parsed', compileredStyle);

编译结果

其中code即是最终的css结果

{
  code: '\ninput[data-v-123] {\n    color: #333;\n}\n',
  map: undefined,
  errors: [],
  rawResult: LazyResult {
    stringified: true,
    processed: true,
    result: Result {
      processor: [Processor],
      messages: [],
      root: [Root],
      opts: [Object],
      css: '\ninput[data-v-123] {\n    color: #333;\n}\n',
      map: undefined,
      lastPlugin: [Object]
    },
    helpers: {
      plugin: [Function: plugin],
      stringify: [Function],
      parse: [Function],
      fromJSON: [Function],
      list: [Object],
      comment: [Function (anonymous)],
      atRule: [Function (anonymous)],
      decl: [Function (anonymous)],
      rule: [Function (anonymous)],
      root: [Function (anonymous)],
      document: [Function (anonymous)],
      CssSyntaxError: [Function],
      Declaration: [Function],
      Container: [Function],
      Processor: [Function],
      Document: [Function],
      Comment: [Function],
      Warning: [Function],
      AtRule: [Function],
      Result: [Function],
      Input: [Function],
      Rule: [Function],
      Root: [Function],
      Node: [Function],
      default: [Function],
      result: [Result],
      postcss: [Function]
    },
    plugins: [ [Object], [Object], [Object] ],
    listeners: {
      Declaration: [Array],
      Rule: [Array],
      AtRule: [Array],
      OnceExit: [Array]
    },
    hasListener: true
  },
  dependencies: Set(0) {}
}

{

code: '\ninput[data-v-123] {\n color: #333;\n}\n',

map: undefined,

errors: [],

rawResult: LazyResult {

stringified: true,

processed: true,

result: Result {

processor: [Processor],

messages: [],

root: [Root],

opts: [Object],

css: '\ninput[data-v-123] {\n color: #333;\n}\n',

map: undefined,

lastPlugin: [Object]

helpers: {

plugin: [Function: plugin],

stringify: [Function],

parse: [Function],

fromJSON: [Function],

list: [Object],

comment: [Function (anonymous)],

atRule: [Function (anonymous)],

decl: [Function (anonymous)],

rule: [Function (anonymous)],

root: [Function (anonymous)],

document: [Function (anonymous)],

CssSyntaxError: [Function],

Declaration: [Function],

Container: [Function],

Processor: [Function],

Document: [Function],

Comment: [Function],

Warning: [Function],

AtRule: [Function],

Result: [Function],

Input: [Function],

Rule: [Function],

Root: [Function],

Node: [Function],

default: [Function],

result: [Result],

postcss: [Function]

plugins: [ [Object], [Object], [Object] ],

listeners: {

Declaration: [Array],

Rule: [Array],

AtRule: [Array],

OnceExit: [Array]

hasListener: true

dependencies: Set(0) {}

}

参考链接

vue3 -- @vue/compiler-sfc 单文件转换工具 -- 学习笔记

从Vue 2到Vue 3组织代码的思维转变

到了Vue 3，当我们看完组合式 API相关文档，蠢蠢欲动立马上手把业务代码挪到setup内时，竟发现无法在setup()内部通过 this 获取当前组件实例了(this 是 undefined)！

其实想要变相获取“this”可以用 getCurrentInstance ，比如像这样访问全局属性：

import { getCurrentInstance } from 'vue'

const MyComponent = {
  setup() {
    const user = ref('aizawasayo')
    const internalInstance = getCurrentInstance()
    console.log(this) // undefined
    // 1. 访问 globalProperties
    console.log(internalInstance.appContext.config.globalProperties)
    // 2. 当前组件实例真正内容
    console.log(internalInstance.ctx, internalInstance.proxy)
    return {
      user
    }
  }
}

import { getCurrentInstance } from 'vue'

const MyComponent = {

setup() {

const user = ref('aizawasayo')

const internalInstance = getCurrentInstance()

console.log(this) // undefined

// 1. 访问 globalProperties

console.log(internalInstance.appContext.config.globalProperties)

// 2. 当前组件实例真正内容

console.log(internalInstance.ctx, internalInstance.proxy)

return {

user

}

真正属于组件的内容是ctx和proxy，proxy就是对ctx包装了一层 Proxy。目前看来属实没用，就不展开来说了。

getCurrentInstance 只能在 setup 或生命周期钩子中调用。不仅使用起来麻烦，且只适用于开发环境。官方都告知我们日常开发中不要用：

貌似到头来this的问题还是无解。Vue 3 Composition API 的设计初衷也是为了减少对组件实例的依赖，避免this指向的困扰。包括一些全局方法也可以提取到 composables 组合函数中，无需再通过当前组件的原型链获得。我们动不动就通过this获取组件实例的思想该转变了。

怎么个直接使用法？我们先看一眼简易版 选项式 API 和 组合式 API 的对比。再用例子来捋：

API 对比

1. 读写数据

Vue 2的做法，或者说Option API更准确 (后面就简写成Vue 2)

data中定义，this.xxx获取
<template>模版中不需要用this

<script>
import { getUsers } from '@/api/user'
export default {
  name: 'User',
  data: {
    return {
      listLoading: false,
      list: [],
      total: 0,
      queryInfo: {
        query: '',
        page: 1,
        pageSize: 10
      },
      emptyText: '没有相关数据',
    }
  },
  mounted() {
    this.listLoading = true
    getUsers(this.queryInfo).then(response => {
      this.list = response.data.list
      this.total = response.data.total
      this.listLoading = false
    })
  }  
}
</script>

import { getUsers } from '@/api/user'

export default {

data: {

return {

listLoading: false,

list: [],

total: 0,

queryInfo: {

query: '',

page: 1,

pageSize: 10

emptyText: '没有相关数据',

}

mounted() {

this.listLoading = true

getUsers(this.queryInfo).then(response => {

this.list = response.data.list

this.total = response.data.total

this.listLoading = false

})

}

</script>

Vue 3 的 Composition API (后面就简写成 Vue 3)

用ref reactive定义。
通过ref方法定义的属性在 setup 函数内需要通过.value去访问它的值 (template 模版内不用)， reactive则不用。我们可以简单地把 ref(obj) 理解为 reactive({ value: obj })。
详细请看 ➡️ 【Vue 3 之：弄清 ref reactive toRef toRefs】

如何选择 ref 和 reactive？建议：

基础类型值(String、Number、Boolean等) 或单值对象(类似{ count: 3 }这样只有一个属性值的对象) 使用 ref
引用类型值(Object、Array)使用 reactive
对于 ref 对象可以使用 unref 语法糖来免去.value访问的困扰

<script>
import { ref, reactive, onMounted } from 'vue'
export default {
  name: 'User',
  setup() {
    const listLoading = ref(false)
    const list = ref([]),
    const total = ref(0),
    const queryInfo = reactive({
      query: '',
      page: 1,
      pageSize: 10
    })
    const emptyText = ref('没有相关数据')

    onMounted(() => {
      listLoading.value = true
      getUsers(queryInfo).then(response => {
        list.value = response.data.list
        total.value = response.data.total
        listLoading.value = false
      })  
    })

    return {
      listLoading, 
      list,
      total,
      queryInfo,
      emptyText
    }
  }
}
</script>

import { ref, reactive, onMounted } from 'vue'

export default {

setup() {

const listLoading = ref(false)

const list = ref([]),

const total = ref(0),

const queryInfo = reactive({

query: '',

page: 1,

pageSize: 10

})

const emptyText = ref('没有相关数据')

onMounted(() => {

listLoading.value = true

getUsers(queryInfo).then(response => {

list.value = response.data.list

total.value = response.data.total

listLoading.value = false

})

return {

listLoading,

list,

total,

queryInfo,

emptyText

}

</script>

2. 定义/调用方法

Vue 2：`methods`

继续上面的例子，我们把请求列表数据的操作提取成一个方法。(略去重复的代码)

<!--模版中调用 methods 方法-->
<template>
  <button @click="show('🐸')">触发 show</button>
</template>
<script>
export default {
  methods: {
    async getList(params) { // 1.定义
      this.listLoading = true
      const response = await getUsers(params)
      this.list = response.data.list
      this.total = response.data.total
      this.listLoading = false
    },
    show(msg){
      console.log('helo', msg)
    }
  },
  mounted() {
    this.getList(this.queryInfo) // 2. 使用
  }  
}
</script>

</template>

export default {

methods: {

async getList(params) { // 1.定义

this.listLoading = true

const response = await getUsers(params)

this.list = response.data.list

this.total = response.data.total

this.listLoading = false

show(msg){

console.log('helo', msg)

}

mounted() {

this.getList(this.queryInfo) // 2. 使用

}

</script>

Vue 3

<script>
import { onMounted } from 'vue'
export default {
  setup() {
    const getList = async (params) => { // 1.定义
      listLoading.value = true
      const response = await getUsers(params)
      list.value = response.data.list
      total.value = response.data.total
      listLoading.value = false
    }

    onMounted(() => {
      getList(queryInfo) // 2. 使用
    })
  }
}
</script>

import { onMounted } from 'vue'

export default {

setup() {

const getList = async (params) => { // 1.定义

listLoading.value = true

const response = await getUsers(params)

list.value = response.data.list

total.value = response.data.total

listLoading.value = false

}

onMounted(() => {

getList(queryInfo) // 2. 使用

})

}

</script>

3. 获取模版DOM元素/或组件实例的引用

Vue 2

直接整上 element-plus Form 表单的的例子，<el-form>是我们写的DemoForm组件的一个子组件，通过为它添加一个refattribute，就能使用使用this.$refs[ref值]直接访问子组件以及它的所有属性/方法了。
这边只放相对实际的场景用例，给 DOM 元素添加 ref 引用的例子看这里：【模板引用】。

<template>
  <el-form :model="formData" ref="formRef">
    <el-form-item label="年龄" prop="age" :rules="formRules">
      <el-input type="age" v-model.number="formData.age"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  name: 'DemoForm',
  data() {
    return {
      formData: {
        age: '',
      },
      formRules: [
        { required: true, message: '年龄不能为空' },
        { type: 'number', message: '年龄必须为数字值' },
      ],
    }
  },
  methods: {
    submitForm() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.formRef.resetFields()
    },
  },
}
</script>

<el-form :model="formData" ref="formRef">

<el-form-item label="年龄" prop="age" :rules="formRules">

<el-input type="age" v-model.number="formData.age"></el-input>

</el-form-item>

<el-form-item>

<el-button type="primary" @click="submitForm">提交</el-button>

<el-button @click="resetForm">重置</el-button>

</el-form-item>

</el-form>

</template>

export default {

data() {

return {

formData: {

age: '',

formRules: [

{ required: true, message: '年龄不能为空' },

{ type: 'number', message: '年龄必须为数字值' },

}

methods: {

submitForm() {

this.$refs.formRef.validate(valid => {

if (valid) {

alert('submit!')

} else {

console.log('error submit!!')

return false

}

})

resetForm() {

this.$refs.formRef.resetFields()

}

</script>

Vue 3

我们来修改成 Composition API 版本：
别忘了 ref 创建的变量要用.value获取值
详细文档请阅：【在组合式 API 中使用 template refs】

<template>
  <el-form :model="formData" ref="formRef">
    <el-form-item label="年龄" prop="age" :rules="formRules">
      <el-input type="age" v-model.number="formData.age"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { reactive, ref } from '@vue/reactivity'
export default {
  setup() {
    const formRef = ref(null) // 1.用 ref 创建一个空引用
    const formData = reactive({
      age: '',
    })
    const formRules = [
      { required: true, message: '年龄不能为空' },
      { type: 'number', message: '年龄必须为数字值' },
    ]
    onMounted(() => {
      // 2.组件实例将在初始渲染后分配给 ref
      console.log(formRef.value)
    })
    const submitForm = () => {
      //  别忘了 ref 创建的变量要用`.value`获取值
      formRef.value.validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
    const resetForm = () => {
      formRef.value.resetFields()
    }
    return {
      formRef,
      formData,
      formRules,
      submitForm,
      resetForm,
    }
  },
}
</script>

<el-form :model="formData" ref="formRef">

<el-form-item label="年龄" prop="age" :rules="formRules">

<el-input type="age" v-model.number="formData.age"></el-input>

</el-form-item>

<el-form-item>

<el-button type="primary" @click="submitForm">提交</el-button>

<el-button @click="resetForm">重置</el-button>

</el-form-item>

</el-form>

</template>

import { reactive, ref } from '@vue/reactivity'

export default {

setup() {

const formRef = ref(null) // 1.用 ref 创建一个空引用

const formData = reactive({

age: '',

})

const formRules = [

{ required: true, message: '年龄不能为空' },

{ type: 'number', message: '年龄必须为数字值' },

]

onMounted(() => {

// 2.组件实例将在初始渲染后分配给 ref

console.log(formRef.value)

})

const submitForm = () => {

// 别忘了 ref 创建的变量要用`.value`获取值

formRef.value.validate(valid => {

if (valid) {

alert('submit!')

} else {

console.log('error submit!!')

return false

}

})

}

const resetForm = () => {

formRef.value.resetFields()

}

return {

formRef,

formData,

formRules,

submitForm,

resetForm,

}

</script>

4. 父组件向子组件传值

文档：Props
使用 DOM 模板时，camelCase (驼峰命名法) 的 props 需要使用等价的 kebab-case (短横线分隔命名) 命名。

说明：第 4-8 点 都会结合同一个 Tabs 标签页的例子，循序渐进梳理这几个属性或方法。依然用了element-plus 的组件(Tabs和TabPane)。

Vue 2

父组件：📃src/views/design/indexV2.vue

// src/views/design/indexV2.vue
<template>
  <div style="padding: 15px">
    <!-- 可以动态赋予一个变量的值 -->
    <!-- 也可以不用`:`传入一个静态的值 -->
    <design-tabs
      :tab-options="tabOptions"
      :active-tab="activeName"
    ></design-tabs>
  </div>
</template>
<script>
import DesignTabs from './DesignTabsV2.vue'
export default {
  name: 'DesignV2',
  components: { DesignTabs },
  data() {
    return {
      tabOptions: [
        { label: '衣服', key: 'clothingDesign', icon: 'cherry' },
        { label: '帽子', key: 'hatDesign', icon: 'cold-drink' },
        { label: '图案', key: 'patternDesign', icon: 'lollipop' },
      ],
      activeName: 'clothingDesign',
    }
  },
}
</script>

// src/views/design/indexV2.vue

<design-tabs

:tab-options="tabOptions"

:active-tab="activeName"

></design-tabs>

</div>

</template>

import DesignTabs from './DesignTabsV2.vue'

export default {

components: { DesignTabs },

data() {

return {

tabOptions: [

{ label: '衣服', key: 'clothingDesign', icon: 'cherry' },

{ label: '帽子', key: 'hatDesign', icon: 'cold-drink' },

{ label: '图案', key: 'patternDesign', icon: 'lollipop' },

activeName: 'clothingDesign',

}

</script>

子组件 DesignTabs：📃src/views/design/components/DesignTabsV2.vue

// src/views/design/components/DesignTabsV2.vue
<template>
  <el-tabs v-model="activeName">
    <el-tab-pane
      v-for="item in tabOptions"
      :label="item.label"
      :name="item.key"
    >
      <template #label>
        <span>
          <i :class="`el-icon-${item.icon}`" />
          {{ item.label }}
        </span>
      </template>
      <template #default>
        假设这是一个渲染<strong style="color: #409eff">{{ item.label }}</strong
        >列表的子组件
      </template>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  name: 'DesignTabsV2',
  // 表示接收的 props
  // 如果定义成对象而不是数组，可以设置 prop 类型、默认值、是否必须
  props: ['tabOptions', 'activeTab'],
  data() {
    return {
      // 如果 prop 用来传递一个初始值
      // 子组件希望将其作为一个本地的数据来使用：
      activeName: this.activeTab,
    }
  }
}
</script>

// src/views/design/components/DesignTabsV2.vue

<el-tabs v-model="activeName">

<el-tab-pane

v-for="item in tabOptions"

:label="item.label"

:name="item.key"

<span>

</span>

</template>

假设这是一个渲染<strong style="color: #409eff">{{ item.label }}</strong

>列表的子组件

</template>

</el-tab-pane>

</el-tabs>

</template>

export default {

// 表示接收的 props

// 如果定义成对象而不是数组，可以设置 prop 类型、默认值、是否必须

props: ['tabOptions', 'activeTab'],

data() {

return {

// 如果 prop 用来传递一个初始值

// 子组件希望将其作为一个本地的数据来使用：

activeName: this.activeTab,

}

</script>

Vue 3

转化成 Composition API 后的子组件：(一贯省略重复代码)
📃src/views/design/components/DesignTabsV3.vue

// src/views/design/components/DesignTabsV3.vue
<script>
import { ref, toRefs } from 'vue'
export default {
  name: 'DesignTabsV3',
  props: ['tabOptions', 'activeTab'],
  setup(props) {
    const { tabOptions, activeTab } = toRefs(props)
    const activeName = ref(activeTab)
    const handleClick = (tab, event) => {
      console.log(tab, event)
    }
    return {
      tabOptions,
      activeTab,
      activeName,
      handleClick,
    }
  },
}
</script>

// src/views/design/components/DesignTabsV3.vue

import { ref, toRefs } from 'vue'

export default {

props: ['tabOptions', 'activeTab'],

setup(props) {

const { tabOptions, activeTab } = toRefs(props)

const activeName = ref(activeTab)

const handleClick = (tab, event) => {

console.log(tab, event)

}

return {

tabOptions,

activeTab,

activeName,

handleClick,

}

</script>

5. 计算属性`computed`

比如我们现在希望在点击 tab 标签的时候能获得 tab 的序号(index)：

Vue 2

组件 DesignTabs：📃src/views/design/components/DesignTabsV2.vue

// src/views/design/components/DesignTabsV2.vue
export default {
  name: 'DesignTabsV2',
  computed: {
    tabIndex() {
      return this.tabOptions.findIndex(item => item.key === this.activeName)
    },
  },
  methods: {
    handleClick(tab, event) {
      console.log(this.tabIndex) // tab 对应的 index
      console.log(tab.index, tab.props) 
      // 这样获得的`index`是字符串，props 可以获得传入`tab-pane`的属性
    },
  },
}

// src/views/design/components/DesignTabsV2.vue

export default {

computed: {

tabIndex() {

return this.tabOptions.findIndex(item => item.key === this.activeName)

methods: {

handleClick(tab, event) {

console.log(this.tabIndex) // tab 对应的 index

console.log(tab.index, tab.props)

// 这样获得的`index`是字符串，props 可以获得传入`tab-pane`的属性

}

Vue 3

这里就比较不一样了，props 的值是不允许在子组件直接修改的。子组件的activeName状态初始值为传入的activeTab，如果activeTab和tabOptions一样通过 toRefs 或 toRef 包装，那么activeName的修改是和activeTab深度响应的，这样会报错；
如果要同步修改父组件的值，可以通过emit事件(后面会说)

组件 DesignTabs：📃src/views/design/components/DesignTabsV3.vue

// src/views/design/components/DesignTabsV3.vue
import { ref, toRefs, computed } from 'vue'
export default {
  name: 'DesignTabsV3',
  setup(props) {
    const { tabOptions } = toRefs(props) // 切记 props 只读，不允许在子组件直接修改
    const activeName = ref(props.activeTab) // 将其赋为组件状态的初始值，直接 props.xx
    // const { tabOptions, activeTab } = toRefs(props)
    // const activeName = ref(activeTab) // 这样达咩

    const tabIndex = computed(() =>
      tabOptions.value.findIndex(item => {
        return item.key === activeName.value
      })
    )

    const handleClick = (tab, event) => {
      console.log(tabIndex.value)
    }
    return {
      tabOptions,
      activeName,
      handleClick,
    }
  }
}

// src/views/design/components/DesignTabsV3.vue

import { ref, toRefs, computed } from 'vue'

export default {

setup(props) {

const { tabOptions } = toRefs(props) // 切记 props 只读，不允许在子组件直接修改

const activeName = ref(props.activeTab) // 将其赋为组件状态的初始值，直接 props.xx

// const { tabOptions, activeTab } = toRefs(props)

// const activeName = ref(activeTab) // 这样达咩

const tabIndex = computed(() =>

tabOptions.value.findIndex(item => {

return item.key === activeName.value

})

)

const handleClick = (tab, event) => {

console.log(tabIndex.value)

}

return {

tabOptions,

activeName,

handleClick,

}

这里想额外提一嘴computed可以包在reactive内使用，在组件数据比较简单的情况下甚至可以直接用reactive包起组件全部数据，就好像 Option Api 的 data 选项那样。这样做的目的是在setup()访问不用再带上.value。
但这同时会带来一个问题，在模版需要使用state.xx去渲染，而且如果我们 return 的时候把state解构，包含的状态会失去响应性，那就得不偿失了。需要用toRefs包裹再传递，即可维持其响应性。

 // src/views/design/components/DesignTabsV3.vue
import { reactive, computed, toRefs } from 'vue'
export default {
  name: 'DesignTabsV3',
  setup(props) {
    const state = reactive({
      tabOps: props.tabOptions
      activeName: props.activeTab
      tabIndex: computed(() =>
        tabOptions.findIndex(item => {
        return item.key === state.activeName
      })
    })
    return { 
      // ...state //  这样会失去属性的响应式
      ...toRefs(state)
    } 
    // 甚至可以直接这样：
    return toRefs(state)
  }
}

// src/views/design/components/DesignTabsV3.vue

import { reactive, computed, toRefs } from 'vue'

export default {

setup(props) {

const state = reactive({

tabOps: props.tabOptions

activeName: props.activeTab

tabIndex: computed(() =>

tabOptions.findIndex(item => {

return item.key === state.activeName

})

return {

// ...state // 这样会失去属性的响应式

...toRefs(state)

}

// 甚至可以直接这样：

return toRefs(state)

}

6. 侦听器`watch`

获取这个tabIndex有什么用呢，目的是在当前标签变化时根据index刷新对应TabPane的子组件的数据。但是如果在标签点击事件触发数据刷新也不合适，因为我们不希望重复点击相同tab时也去刷新。那么这个时候watch或者watchEffect就登场了。

Vue 2

组件 DesignTabs：📃src/views/design/components/DesignTabsV2.vue

// src/views/design/components/DesignTabsV2.vue
<template>
  <!--省略部分 ...-->
      <template #default>
        这是一个渲染<strong style="color: #409eff">{{ item.label }}</strong
        >列表的子组件
        <!--现在我们加上了 DesignList 组件-->
        <design-list :ref="'designList' + i" :type="item.key" />
      </template>
  <!--省略部分...-->
</template>
<script lang="jsx">
import { defineComponent, toRef } from 'vue'

// DesignList 组件，这里图方便混合组合式和选项式 API 写了
const DesignList = defineComponent({
  name: 'DesignList',
  props: ['type'],
  setup(props) {
    const key = toRef(props, 'type')
    return () => <div>{key.value}</div>
  },
  methods: {
    fetchData() {
      console.log(`重新请求${this.type}数据`)
    },  
  },
})

export default {
  name: 'DesignTabsV2',
  watch: {
    activeName(val) {
      console.log(`${val}`)
      // 触发子组件DesignList的数据请求
      this.$refs[`designList${this.tabIndex}`].fetchData() 
    },
  },
}

// src/views/design/components/DesignTabsV2.vue

这是一个渲染<strong style="color: #409eff">{{ item.label }}</strong

>列表的子组件

<design-list :ref="'designList' + i" :type="item.key" />

</template>

</template>

import { defineComponent, toRef } from 'vue'

// DesignList 组件，这里图方便混合组合式和选项式 API 写了

const DesignList = defineComponent({

props: ['type'],

setup(props) {

const key = toRef(props, 'type')

return () => <div>{key.value}</div>

methods: {

fetchData() {

console.log(`重新请求${this.type}数据`)

})

export default {

watch: {

activeName(val) {

console.log(`${val}`)

// 触发子组件DesignList的数据请求

this.$refs[`designList${this.tabIndex}`].fetchData()

}

Vue 3

这个写法可能不是很直观，可以看下 ➡️ 组合式 API 模板引用在 v-for 中的用法
组件 DesignTabs：📃src/views/design/components/DesignTabsV3.vue

// src/views/design/components/DesignTabsV3.vue
<template>
  <!--省略部分 ...-->
  <!--别忘了这是v-for遍历生成的组件-->
    <design-list
      :ref="el => { if (el) designList[i] = el }"
      :type="item.key" :key="item.key + i" 
    />
  <!--省略部分 ...-->
</template>
<script>
import { ref, toRefs, computed, watch, defineComponent, toRef, onBeforeUpdate } from 'vue'

// DesignList 组件同上面代码👆

export default {
  name: 'DesignTabsV3',
  components: { DesignList },
  setup(props) {
    const designList = ref([])
    // 确保在每次更新之前重置ref
    onBeforeUpdate(() => {
      designList.value = []
    })
    watch(activeName, val => {
      console.log(`${val}`)
      designList.value[tabIndex.value].fetchData()
    })
  },
}
</script>

// src/views/design/components/DesignTabsV3.vue

<design-list

:ref="el => { if (el) designList[i] = el }"

:type="item.key" :key="item.key + i"

</template>

import { ref, toRefs, computed, watch, defineComponent, toRef, onBeforeUpdate } from 'vue'

// DesignList 组件同上面代码👆

export default {

components: { DesignList },

setup(props) {

const designList = ref([])

// 确保在每次更新之前重置ref

onBeforeUpdate(() => {

designList.value = []

})

watch(activeName, val => {

console.log(`${val}`)

designList.value[tabIndex.value].fetchData()

})

}

</script>

watch 和 watchEffect 的功能是等效的，都是侦听其依赖，并在依赖值变更时重新运行定义的函数。两者区别：

watch：

必须在第一个参数明确指定跟踪的依赖；
侦听器数据源只能是getter/effect函数、ref、reactive对象，或者包含这些类型(的数据)的数组。
换句话说，只要侦听数据不是ref、reactive对象，就必须传入一个箭头函数。
打个比方，若要侦听reactive对象的某个属性(例：const state = reactive({ count: 0 })的 count)，便不能像侦听单个ref或整个reactive对象那样直接传一个变量，而是必须在第一个参数传入一个回调函数，如() => state.count；
第二个参数是依赖值变更时执行的回调，函数内能访问被侦听状态的当前值和前一个值；
组件初始化时不会执行回调。如果需要可在第三个参数(Object)中设置immediate: true；
如果要对多层嵌套状态深度侦听，在第三个参数中设置deep: true

watchEffect：

无需手动传入依赖项；
只有一个参数，即侦听数据变更的回调函数，会自动跟踪所有函数中用到的变量；
组件初始化时即会执行一次。

7. 子组件向父组件通信(触发父组件方法)

Vue 2

父组件：📃src/views/design/indexV2.vue

// src/views/design/indexV2.vue
<template>
  <div style="padding: 15px">
    <design-tabs
      :tab-options="tabOptions"
      :active-tab="activeName"
      :tab-change="handleTabChange"
    ></design-tabs>
  </div>
</template>
<script>
export default {
  name: 'DesignV2',
  methods: {
    handleTabChange(tab) {
      this.activeName = tab
    },
  } 
}
</script>

// src/views/design/indexV2.vue

<design-tabs

:tab-options="tabOptions"

:active-tab="activeName"

:tab-change="handleTabChange"

></design-tabs>

</div>

</template>

export default {

methods: {

handleTabChange(tab) {

this.activeName = tab

}

</script>

子组件 DesignTabs：📃src/views/design/components/DesignTabsV2.vue

// src/views/design/components/DesignTabsV2.vue
export defalut {
  name: 'DesignTabsV2',
  watch: {
    activeName(val) {
      this.$emit('tabChange', val)
    },
  },
}

// src/views/design/components/DesignTabsV2.vue

export defalut {

watch: {

activeName(val) {

this.$emit('tabChange', val)

}

Vue 3

子组件 DesignTabs：📃src/views/design/components/DesignTabsV3.vue

// src/views/design/components/DesignTabsV3.vue
export default {
  name: 'DesignTabsV3',
  emits: ['tabChange'],
  setup(props, context) {
    watch(activeName, val => {
      context.emit('tabChange', val)
    })
  }
}

// src/views/design/components/DesignTabsV3.vue

export default {

emits: ['tabChange'],

setup(props, context) {

watch(activeName, val => {

context.emit('tabChange', val)

})

}

8. 使用 Vue Router

Vue 2

📃src/views/design/components/DesignTabsV2.vue

// src/views/design/components/DesignTabsV2.vue
export defalut {
  name: 'DesignTabsV2',
  watch: {
    activeName(val) {
      this.$router.push(`${this.$route.path}?tab=${val}`)
    },
  },
}

// src/views/design/components/DesignTabsV2.vue

export defalut {

watch: {

activeName(val) {

this.$router.push(`${this.$route.path}?tab=${val}`)

}

Vue 3

📃src/views/design/components/DesignTabsV3.vue

// src/views/design/components/DesignTabsV3.vue
import { useRouter, useRoute } from 'vue-router'
export default {
  name: 'DesignTabsV3',
  setup() {
    const router = useRouter()
    const route = useRoute()

    watch(activeName, val => {
      router.push(`${route.path}?tab=${val}`)
    })
  },
}

// src/views/design/components/DesignTabsV3.vue

import { useRouter, useRoute } from 'vue-router'

export default {

setup() {

const router = useRouter()

const route = useRoute()

watch(activeName, val => {

router.push(`${route.path}?tab=${val}`)

})

}

9. 获取 Vuex 对象

Vue 2

export default {
  mounted() {
    console.log(this.$store.state.name)
    this.$store.commit('show')
  } 
}

export default {

mounted() {

console.log(this.$store.state.name)

this.$store.commit('show')

}

Vue 3

<script>
import { onMounted } from 'vue'
import { useStore } from 'vuex'
export default {
  setup(props) {
    const store = useStore()

    onMounted(() => {
      console.log(store.name)
      store.commit('show')
    })
  }
}
</script>

import { onMounted } from 'vue'

import { useStore } from 'vuex'

export default {

setup(props) {

const store = useStore()

onMounted(() => {

console.log(store.name)

store.commit('show')

})

}

</script>

参考链接

从 Vue 2 到 Vue 3 组织代码的思维转变（一）- 获取组件实例

ubuntu 16.04/macOS Big Sur(11.4)编译Quasar

$ cd ~

# 安装配置 Node Version Manager，用来管理安装使用特定版本
$ git clone https://github.com/nvm-sh/nvm.git

$ cd nvm 

$ bash install.sh

# 刷新环境变量，使得设置生效
$ source ~/.bashrc

$ nvm install 16.0.0

$ nvm use 16.0.0

$ cd ~

$ git clone https://github.com/quasarframework/quasar.git

$ cd quasar

$ git checkout quasar-v1.15.23

# git checkout quasar-v2.0.3

$ cd ui

# 清除缓存的node模块
$ rm -rf node_modules 

$ npm install nan -g 

$ npm install yarn -g

# 自动根据 package-lock.json 安装依赖
$ npm install

$ yarn build

# 在当前目录下的dist目录下生成quasar.umd.js

$ cd ~

# 安装配置 Node Version Manager，用来管理安装使用特定版本

$ git clone https://github.com/nvm-sh/nvm.git

$ cd nvm

$ bash install.sh

# 刷新环境变量，使得设置生效

$ source ~/.bashrc

$ nvm install 16.0.0

$ nvm use 16.0.0

$ cd ~

$ git clone https://github.com/quasarframework/quasar.git

$ cd quasar

$ git checkout quasar-v1.15.23

# git checkout quasar-v2.0.3

$ cd ui

# 清除缓存的node模块

$ rm -rf node_modules

$ npm install nan -g

$ npm install yarn -g

# 自动根据 package-lock.json 安装依赖

$ npm install

$ yarn build

# 在当前目录下的dist目录下生成quasar.umd.js

注意，目前（2020/07/05）发现，在macOS Big Sur(11.4)版本上，dev 分支没办法编译通过。

目前（2020/07/20）发现，在macOS Big Sur(11.4)系统，quasar 2.0.3/1.15.23 版本已经可以编译通过，开发分支经常编译不通过，这部分经常发生较大变动。

参考链接

macOS Big Sur(11.4)安装指定版本Node

# 安装配置 Node Version Manager，用来管理安装使用特定版本
$ git clone https://github.com/nvm-sh/nvm.git

$ cd nvm 

$ bash install.sh

# 刷新环境变量，使得设置生效
$ source ~/.bashrc

$ nvm install 12.16.2

$ nvm use 12.16.2

# 安装配置 Node Version Manager，用来管理安装使用特定版本

$ git clone https://github.com/nvm-sh/nvm.git

$ cd nvm

$ bash install.sh

# 刷新环境变量，使得设置生效

$ source ~/.bashrc

$ nvm install 12.16.2

$ nvm use 12.16.2

参考链接

macOS Big Sur(11.4)编译vuelidate 2.x适配Vue 3.x

目前，vuelidate 2.x暂时还没发布正式版本，而如果需要适配Vue 3.x，则需要自己编译，编译过程如下：

$ brew install npm

$ brew install yarn

$ npm install bili -g

$ git clone https://github.com/vuelidate/vuelidate.git
# 如果需要编译umd版本，目前需要使用下面的仓库
# git clone https://github.com/wangqiang1588/vuelidate.git

$ cd vuelidate

$ cd packages

$ cd vuelidate

$ npm run build

# 当前目录下的dist/index.umd.js即是目标文件，拷贝出来即可

$ cd ..

$ cd validators

$ npm run build


# 当前目录下的dist/index.umd.js即是目标文件，拷贝出来即可

$ brew install npm

$ brew install yarn

$ npm install bili -g

$ git clone https://github.com/vuelidate/vuelidate.git

# 如果需要编译umd版本，目前需要使用下面的仓库

# git clone https://github.com/wangqiang1588/vuelidate.git

$ cd vuelidate

$ cd packages

$ cd vuelidate

$ npm run build

# 当前目录下的dist/index.umd.js即是目标文件，拷贝出来即可

$ cd ..

$ cd validators

$ npm run build

# 当前目录下的dist/index.umd.js即是目标文件，拷贝出来即可

移动端 JS 引擎哪家强

在一般的移动端开发场景中，每次更新应用功能都是通过 Native 语言开发并通过应用市场版本分发来实现的。但是市场瞬息万变，Native 语言在开发效率上存在一定不足，并且从APP版本更新到应用市场审核发布再到用户下载更新，总会存在一定的时间差，这样就导致新的功能无法及时覆盖全量用户。

为了解决这个问题，开发者们一般会在项目里引入一门脚本语言，提速APP的研发流程。在移动端应用比较广泛的脚本语言有 Lua和JavaScript，前者在游戏领域用的比较多，后者在应用领域用的比较多。本篇文章主要是想探讨一下移动双端（iOS & Android）的JavaScript引擎选型。由于个人水平有限，文章总会有遗漏和不足的地方，还请各位大佬多多指教。

JS 引擎选型要点

JavaScript作为世界上最热门的脚本语言，有着非常多的引擎实现：有Apple御用的 JavaScriptCore，有性能最强劲的V8，还有最近热度很高的QuickJS......如何从这些JS引擎里选出最适合的？我个人认为要有几个考量：

性能：这个没话说，肯定是越快越好
体积：JS引擎会增加一定的包体积
内存占用：内存占用越少越好
JavaScript 语法支持程度：支持的新语法越多越好
调试的便捷性：是否直接支持debug？还是需要自己编译实现调试工具链
应用市场平台规范：主要是iOS平台，平台禁止应用集成带JIT功能的虚拟机

比较麻烦的是，上面的几个点都不是互相独立的，比如说开启JIT的V8引擎，性能肯定是最好的，但它引擎体积就很大，内存占用也很高；在包体积上很占优势的QuickJS，由于没有JIT加持，和有JIT的引擎比起来平均会有5-10倍的性能差距。

下面我会综合刚刚提到的几个点，并选择了JavaScriptCore，V8，Hermes 和 QuickJS这4个JSVM，说说它们的优点和特点，再谈谈他们的不足。

继续阅读移动端 JS 引擎哪家强

Qussar QScrollArea动态适配View高度

我们在使用Qussar QScrollArea等控件的时候，很多情况下，必须给出一个固定的高度，否则控件的高度会变成 0，导致无法显示出来。如何动态适配View高度呢？参考如下：

<template>
  <q-page>
    . . .
    <q-scroll-area>
      <q-resize-obeserver @resize="updateHeights" />
    <q-scroll-area>
  </q-page>
</template>

<script>
. . . 
export default {
  . . . 
  methods: {
    . . .
    updateHeights(size) {
      // {
      //   width: 20 // width of container (in px)
      //   height: 50 // height of container (in px)
      // }
      //重新计算整个区域的高度，使得滚动区域占满整个父控件的高度
      const sz = this.measureElWrapSize(this.$el);
      this.$el.style.height = sz.height + 'px';
    },
    /**
     * 字符串对象是否不为空
     */
    isNotEmpty: function (s) {
        return (!this.isEmpty(s));
    },
    /**
     * 字符串对象是否为空
     */
    isEmpty: function (s) {
        return (this.isNull(s) || ('' === s));
    },
    /**
     * 对象是否为空
     */
    isNull: function (o) {
        return ((undefined === o) || (null === o));
    },
    /**
     * 对象是否不为空
     */
    isNotNull: function (o) {
        return (!this.isNull(o));
    },
    // 计算对象适配父控件大小,从底层开始向上搜索，直到搜索到受到限制的位置为止，然后反向计算应该得到的宽高
    measureElWrapSize: function (el) {
        const hls = []; //到第一次出现高度限制的父窗口的数组
        const wls = []; //到第一次出现宽度限制的父窗口的数组

        // 向上搜索，直到父控件出现高度限制，否则继续向上搜索
        let p = el.offsetParent;
        let maxH = window.innerHeight;
        while (this.isNotNull(p)) {
            const h = p.style.height;
            if (this.isNotEmpty(h)) {
                maxH = Math.min(parseInt(h), maxH);
                break;
            }
            hls[hls.length] = p;
            p = p.offsetParent;
        }

        // 逐层遍历父亲控件，计算剩余高度
        let i = 0;
        for (; i < hls.length; i++) {
            const e = hls[i];
            maxH = maxH - e.offsetTop;
        }

        //需要计算自身的顶部偏移
        maxH = maxH - el.offsetTop;

        if (maxH < 0) {
            maxH = 0;
        }

        // 向上搜索，直到父控件出现宽度限制，否则继续向上搜索
        let maxW = window.innerWidth;
        p = el.offsetParent;
        while (this.isNotNull(p)) {
            const w = p.style.width;
            if (this.isNotEmpty(w)) {
                maxW = Math.min(parseInt(w), maxW);
                break;
            }
            wls[wls.length] = p;
            p = p.offsetParent;
        }

        // 逐层遍历父亲控件，计算剩余宽度
        i = 0;
        for (; i < wls.length; i++) {
            const e = wls[i];
            maxW = maxW - e.offsetLeft;
        }

        //需要计算自身的左侧偏移
        maxW = maxW - el.offsetLeft;
        
        if (maxW < 0) {
            maxW = 0;
        }

        return {width: maxW, height: maxH};
    },
  },
}

100

101

102

103

104

105

106

107

108

109

110

111

<q-page>

. . .

<q-scroll-area>

<q-resize-obeserver @resize="updateHeights" />

<q-scroll-area>

</q-page>

</template>

. . .

export default {

. . .

methods: {

. . .

updateHeights(size) {

// {

// width: 20 // width of container (in px)

// height: 50 // height of container (in px)

// }

//重新计算整个区域的高度，使得滚动区域占满整个父控件的高度

const sz = this.measureElWrapSize(this.$el);

this.$el.style.height = sz.height + 'px';

/**

* 字符串对象是否不为空

isNotEmpty: function (s) {

return (!this.isEmpty(s));

/**

* 字符串对象是否为空

isEmpty: function (s) {

return (this.isNull(s) || ('' === s));

/**

* 对象是否为空

isNull: function (o) {

return ((undefined === o) || (null === o));

/**

* 对象是否不为空

isNotNull: function (o) {

return (!this.isNull(o));

// 计算对象适配父控件大小,从底层开始向上搜索，直到搜索到受到限制的位置为止，然后反向计算应该得到的宽高

measureElWrapSize: function (el) {

const hls = []; //到第一次出现高度限制的父窗口的数组

const wls = []; //到第一次出现宽度限制的父窗口的数组

// 向上搜索，直到父控件出现高度限制，否则继续向上搜索

let p = el.offsetParent;

let maxH = window.innerHeight;

while (this.isNotNull(p)) {

const h = p.style.height;

if (this.isNotEmpty(h)) {

maxH = Math.min(parseInt(h), maxH);

break;

}

hls[hls.length] = p;

p = p.offsetParent;

}

// 逐层遍历父亲控件，计算剩余高度

let i = 0;

for (; i < hls.length; i++) {

const e = hls[i];

maxH = maxH - e.offsetTop;

}

//需要计算自身的顶部偏移

maxH = maxH - el.offsetTop;

if (maxH < 0) {

maxH = 0;

}

// 向上搜索，直到父控件出现宽度限制，否则继续向上搜索

let maxW = window.innerWidth;

p = el.offsetParent;

while (this.isNotNull(p)) {

const w = p.style.width;

if (this.isNotEmpty(w)) {

maxW = Math.min(parseInt(w), maxW);

break;

}

wls[wls.length] = p;

p = p.offsetParent;

}

// 逐层遍历父亲控件，计算剩余宽度

i = 0;

for (; i < wls.length; i++) {

const e = wls[i];

maxW = maxW - e.offsetLeft;

}

//需要计算自身的左侧偏移

maxW = maxW - el.offsetLeft;

if (maxW < 0) {

maxW = 0;

}

return {width: maxW, height: maxH};

}

或者类似下面的情况：

<div id="q-app">
    <div class="q-pa-md">
        <q-layout class="shadow-2 rounded-borders" container ref="mainView"
                  view="hHh Lpr lff">
            . . . 
            <q-resize-obeserver @resize="updateHeights" />
        </q-layout>
    </div>
</div>
</template>

<script>
. . . 
export default {
  . . . 
  methods: {
    . . .
    updateHeights(size) {
      // {
      //   width: 20 // width of container (in px)
      //   height: 50 // height of container (in px)
      // }
      const offset = this.$refs.mainView.$el.offsetTop;
      this.$refs.mainView.$el.style.height = (window.innerHeight - offset) + 'px';
    }
  },
}

<q-layout class="shadow-2 rounded-borders" container ref="mainView"

view="hHh Lpr lff">

. . .

<q-resize-obeserver @resize="updateHeights" />

</q-layout>

</div>

</template>

. . .

export default {

. . .

methods: {

. . .

updateHeights(size) {

// {

// width: 20 // width of container (in px)

// height: 50 // height of container (in px)

// }

const offset = this.$refs.mainView.$el.offsetTop;

this.$refs.mainView.$el.style.height = (window.innerHeight - offset) + 'px';

}

2025 年 7 月
一	二	三	四	五	六	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

this指向丢失

多重调用以及箭头函数

this指向丢失解决办法

bind传递函数参数

总结

参考链接

Same Length, Each Value Equal

Deep Equality With POJOs

Using Lodash's isEqual()

参考链接

浅析

在组合式API中的用法

一级组件修改数据，孙子组件监听变更

孙子组件修改数据，一级组件监听变更

禁止孙子组件修改一级组件的数据

在配置项式API中的用法

provide

inject

参考链接

@vue/compiler-sfc

parse

compileTemplate

compilerScript

compileStyle

参考链接

1. 读写数据

Vue 2的做法，或者说Option API更准确 (后面就简写成Vue 2)

Vue 3 的 Composition API (后面就简写成 Vue 3)

2. 定义/调用方法

Vue 2：methods

Vue 3

3. 获取模版DOM元素/或组件实例的引用

Vue 2

Vue 3

4. 父组件向子组件传值

Vue 2

Vue 3

5. 计算属性computed

Vue 2

Vue 3

6. 侦听器watch

Vue 2

Vue 3

7. 子组件向父组件通信(触发父组件方法)

Vue 2

Vue 3

8. 使用 Vue Router

Vue 2

Vue 3

9. 获取 Vuex 对象

Vue 2

Vue 3

参考链接

参考链接

参考链接

JS 引擎选型要点

参考链接

Using Lodash's `isEqual()`

Vue 2：`methods`

5. 计算属性`computed`

6. 侦听器`watch`