树莓派4的GPIO接口保留了以前型号的标准功能，也引入了一些额外的功能。下面让我们来看看这个标准的40针接口都有哪些变化，具体都是哪些功能？
Apache2/Httpd的目录浏览功能 列出的文件名不完整
Apache2 的目录浏览功能 列出的文件名不完整，修改设置参考如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
< Directory "设置你的路径"> Options +Indexes +Includes +FollowSymLinks +MultiViews AllowOverride All #Require local IndexOptions Charset=UTF-8 #编码格式,防止中文乱码 IndexOptions NameWidth=* #根据文件名自动调整列宽 Allow from all </ Directory > |
参考链接
Android Studio Flamingo | 2022.2.1 Patch 2 配置Robolectric-3.8/4.3.1/4.5.1/4.6.1单元测试环境
一直通过 Android Studio 3.6.3/4.0/4.1/4.2配置Robolectric-3.8/4.3.1/4.5.1/4.6.1 Powermock-1.6.6单元测试环境 配置 Powermock 进行单元测试。
虽然配置起来稍显复杂，但是也是够用的。
但是当升级到Android Studio Flamingo | 2022.2.1 Patch 2 之后，内置的 Java 版本被升级到 Java 17 ，使用这个 Java 版本执行单元测试，会报错如下：
|
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 32 33 34 35 36 37 38 39 40 |
Failed to instantiate DeepCloner. The DeepCloner implementation must have a one-arg constructor taking a Classloader as parameter. java.lang.RuntimeException: Failed to instantiate DeepCloner. The DeepCloner implementation must have a one-arg constructor taking a Classloader as parameter. at org.powermock.classloading.AbstractClassloaderExecutor.createDeepCloner(AbstractClassloaderExecutor.java:91) at org.powermock.classloading.AbstractClassloaderExecutor.executeWithClassLoader(AbstractClassloaderExecutor.java:55) at org.powermock.classloading.SingleClassloaderExecutor.execute(SingleClassloaderExecutor.java:67) at org.powermock.classloading.AbstractClassloaderExecutor.execute(AbstractClassloaderExecutor.java:43) at org.powermock.modules.junit4.rule.PowerMockStatement.evaluate(PowerMockRule.java:75) at org.junit.runners.ParentRunner$3.evaluate(ParentRunner.java:306) at org.robolectric.RobolectricTestRunner$HelperTestRunner$1.evaluate(RobolectricTestRunner.java:591) at org.robolectric.internal.SandboxTestRunner$2.lambda$evaluate$0(SandboxTestRunner.java:274) at org.robolectric.internal.bytecode.Sandbox.lambda$runOnMainThread$0(Sandbox.java:88) at java.base/java.util.concurrent.FutureTask.run(FutureTask.java:264) at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1136) at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:635) at java.base/java.lang.Thread.run(Thread.java:833) Caused by: java.lang.reflect.InvocationTargetException at java.base/jdk.internal.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method) at java.base/jdk.internal.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:77) at java.base/jdk.internal.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45) at java.base/java.lang.reflect.Constructor.newInstanceWithCaller(Constructor.java:499) at java.base/java.lang.reflect.Constructor.newInstance(Constructor.java:480) at org.powermock.classloading.AbstractClassloaderExecutor.createDeepCloner(AbstractClassloaderExecutor.java:89) ... 12 more Caused by: java.lang.ExceptionInInitializerError at com.thoughtworks.xstream.XStream.setupConverters(XStream.java:845) at com.thoughtworks.xstream.XStream.<init>(XStream.java:574) at com.thoughtworks.xstream.XStream.<init>(XStream.java:496) at com.thoughtworks.xstream.XStream.<init>(XStream.java:465) at com.thoughtworks.xstream.XStream.<init>(XStream.java:411) at com.thoughtworks.xstream.XStream.<init>(XStream.java:350) at org.powermock.classloading.DeepCloner.<init>(DeepCloner.java:33) ... 18 more Caused by: java.lang.reflect.InaccessibleObjectException: Unable to make field protected java.lang.reflect.InvocationHandler java.lang.reflect.Proxy.h accessible: module java.base does not "opens java.lang.reflect" to unnamed module @5a69b2d1 at java.base/java.lang.reflect.AccessibleObject.checkCanSetAccessible(AccessibleObject.java:354) at java.base/java.lang.reflect.AccessibleObject.checkCanSetAccessible(AccessibleObject.java:297) at java.base/java.lang.reflect.Field.checkCanSetAccessible(Field.java:178) at java.base/java.lang.reflect.Field.setAccessible(Field.java:172) at com.thoughtworks.xstream.core.util.Fields.locate(Fields.java:40) at com.thoughtworks.xstream.converters.extended.DynamicProxyConverter.<clinit>(DynamicProxyConverter.java:42) ... 25 more |
可是 Powermock 已经长时间没有新版本发布，没有及时跟进 Java 版本的更新。
当时引入 Powermock 的原因是为了解决静态函数的测试问题，但是从 Mockito 3.4.0 版本开始，Mockito 已经支持静态函数测试。
因此，完全可以只使用 Mockto 进行测试。
|
1 2 |
// https://mvnrepository.com/artifact/org.mockito/mockito-core testImplementation 'org.mockito:mockito-core:5.3.1' |
待测试代码如下:
|
1 2 3 4 5 6 7 8 9 10 |
public class StaticUtils { public static String name() { return "name"; } public static String getString(String s) { return s; } } |
测试代码如下：
|
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 |
import org.junit.Assert; import org.junit.Test; import org.mockito.ArgumentMatchers; import org.mockito.MockedStatic; import org.mockito.Mockito; public class StaticUtilsTest { @Test public void givenStaticMethodWithNoArgs_whenMocked_thenReturnsMockSuccessfully() { Assert.assertEquals(StaticUtils.name(), "name"); try (MockedStatic<StaticUtils> utils = Mockito.mockStatic(StaticUtils.class)) { utils.when(StaticUtils::name).thenReturn("uname"); Assert.assertEquals(StaticUtils.name(), "uname"); utils.when(() -> StaticUtils.getString(ArgumentMatchers.anyString())).thenReturn("target"); Assert.assertEquals(StaticUtils.getString("123"), "target"); } Assert.assertEquals(StaticUtils.name(), "name"); Assert.assertEquals(StaticUtils.getString("123"), "123"); } } |
参考链接
- Android Studio 3.6.3/4.0/4.1/4.2配置Robolectric-3.8/4.3.1/4.5.1/4.6.1 Powermock-1.6.6单元测试环境
- Mocking Static Methods With Mockito
- Kotlin 写 Android 单元测试（三），Mockito mocking 框架的使用
- 使用Mockito模拟Static静态方法
- 使用mockito来mock final、static、private以及构造方法
- Mock Java Constructors With Mockito | Configuration and Examples
Google I/O 2023 - Flutter 3.10 发布，快来看看有什么更新吧
虽然本次 I/O 的核心 keynote 主要是 AI ，但是按照惯例依然发布了新的 Flutter 稳定版，不过并非大家猜测的 4.0，而是 3.10 ，Flutter 的版本号依然那么的出人意料。
Flutter 3.10 主要包括有对 Web、mobile、graphics、安全性等方面的相关改进，核心其实就是：
- iOS 默认使用了 Impeller
- 一堆新的 Material 3 控件袭来
- iOS 性能优化，Android 顺带可有可无的更新
- Web 可以无 iframe 嵌套到其他应用
ThinkCenter M820z用户指南和硬件维护手册(拆机指南）
ThinkCenter M820z用户指南和硬件维护手册(拆机指南）
Android之FileProvider详解
简介
Android 7.0 之前，文件的 Uri 以 file:// 形式提供给其他 app 访问。
Android 7.0 之后，分享文件的 Uri 发生了变化。为了安全起见，file:// 形式的Uri 不能正常访问。官方提供了 FileProvider，FileProvider生成的Uri会以content://的形式分享给其他app使用。
content形式的Uri可以让其他app临时获得读取(Read)和写入(Write)权限，只要我们在创建 Intent 时，使用 Intent.setFlags() 添加权限。只要接收Uri的app在接收的Activity任务栈中处于活动状态，添加的权限就会一直有效，直到app被任务栈移除。
目的
在7.0 以前，为了访问 file:// 形式的 Uri，我们必须修改文件的权限。修改后的权限对所有 app 都是有效的，这样的行为是不安全的。content://形式的Uri让Android的文件系统更安全，对于分享的文件，接收方 app 只拥有临时的权限，减少了我们app内部的文件被其他 app 恶意操作的行为。
使用
创建FileProvider
在manifest文件<application>标签中添加pvodier标签，配置如下。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<manifest> ... <application> <activity> ..... </activity> <provider android:name="androidx.core.content.FileProvider" android:authorities="com.example.app.fileprovider" android:exported="false" android:grantUriPermissions="true"> <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths" /> </provider> </application> </manifest> |
android:name指定Provider所在的位置。官方自带的FileProvider已经相当完善，所以我们不需要像Service、Broadcast一样自定义，直接使用自带的就行，直接输入privoder会自动出现提示。
android:authorities相当于一个用于认证的暗号，在分享文件生成Uri时，会通过它的值生成对应的Uri。值是一个域名，一般格式为<包名>.fileprovider。
android:exported设置为false，FileProvider不需要公开。
android:grantUriPermissions设置为true，这样就能授权接收端的app临时访问权限了。
设置共享目录
在res/xml中创建一个资源文件（如果xml目录不存在，先创建），名字随便（一般叫file_paths.xml）。
|
1 2 3 4 5 |
<?xml version="1.0" encoding="utf-8"?> <paths xmlns:android="http://schemas.android.com/apk/res/android"> <files-path name="my_logs" path="logs/"/> ... </paths> |
<paths>必须有1个或多个子标签，每个子标签代表要请求的私有文件目录。不同的子标签代表不同的目录类型。
在<provider>标签中添加<meta-data>子标签。
|
1 2 3 4 5 6 7 8 9 |
<provider android:name="androidx.core.content.FileProvider" android:authorities="com.example.app.fileprovider" android:exported="false" android:grantUriPermissions="true"> <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths" /> </provider> |
设置<meta-data>的属性android:name值为android.support.FILE_PROVIDER_PATHS,属性android:resouce的值为刚才我们创建的path文件名。
配置paths
<paths>的每个子标签必须有path属性，代表content Uris的路径。name不需要和path保持一样，只是一个名称。
子标签有以下几种。
files-path
|
1 |
<files-path name="my_files" path="path" /> |
代表内部存储的files目录，与Context.getFilesDir()获取的路径对应。
最终生成的Uri格式为：authorities/pathname/filename
示例：
|
1 |
content://com.example.app.fileprovider/my_files/filexxx.jpg |
cache-path
|
1 |
<cache-path name="name" path="path" /> |
代表内部存储的cache目录，与Context.getCacheDir()获取的路径对应。
external-path
|
1 |
<external-path name="name" path="path" /> |
代表外部存储(sdcard)的cache目录，与Environment.getExternalStorageDirectory()获取的路径对应。
external-files-path
|
1 |
<external-files-path name="name" path="path" /> |
代表app的外部存储的根目录，与Context#getExternalFilesDir(String) Context.getExternalFilesDir(null)获取的路径对应。
external-cache-path
|
1 |
<external-cache-path name="name" path="path" /> |
代表app外部缓存区域的根目录，与Context.getExternalCacheDir()获取的路径对应。
external-media-path
|
1 |
<external-media-path name="name" path="path" /> |
代表app外部存储媒体区域的根目录，与Context.getExternalMediaDirs()获取的路径对应。
注意： 这个目录只在API 21（也就是Android 5.0）以上的系统上才存在。
生成Content Uri文件
为了让其他app使用Content Uri，我们的app必须提前生成Uri。
|
1 2 3 4 |
File filePath = new File(Context.getFilesDir(), "my_log"); File newFile = new File(filePath, "my_log.log"); // 生成Uri Uri contentUri = FileProvider.getUriForFile(getContext(), "com.example.app.fileprovider", newFile); |
这里注意获取目录，在配置paths时我们讲了，paths的子标签必须和获取目录的代码保持对应。这里我们用的是Context.getFilesDir(),所以paths文件中必须包含files-path子标签，不然别的app获取uri时会出现异常。
最终生成Uri是使用的FileProvider.getUriForFile()。第一个参数就是provider中设置的authorities属性值。
授权临时权限
分享一般只有这读取和写入2种权限，根据需要传入Intent.addFlags()中。
|
1 2 3 |
// 这里用的是发送文件。 Intent intent = new Intent(Intent.ACTION_SEND); intent.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION | Intent.FLAG_GRANT_WRITE_URI_PERMISSION); |
Uri传入Intent
有好几种传入的方式，根据不同的场景使用不同的方式。
为邮箱app分享附件文件
|
1 |
intent.putExtra(Intent.EXTRA_STREAM, contentUri); |
其他分享
使用Intent.setDate或Intent.setClipData()。
|
1 |
intent.setClipDataClipData.newRawUri("", contentUri); |
最后使用startActivity(intent)启动分享操作。
参考链接
解决mysql导入数据文件过慢的问题
目前遇到一个问题，mysql 使用 source 命令导入 *.sql 数据文件时，运行的很慢，大概一秒钟插入一两百条左右的样子，对于大的文件来说这个太慢了。
1.登入mysql
|
1 |
$ mysql -uroot -p*** |
2.查看mysql中对于参数 innodb_flush_log_at_trx_commit 的配置
|
1 |
show global variables where variable_name = 'innodb_flush_log_at_trx_commit'; |
3.修改
|
1 |
SET GLOBAL innodb_flush_log_at_trx_commit = 0; |
修改完成后在次执行相同的文件，200M大约200w+条的数据在1分钟左右。
对于该参数的不同值的说明：
1.innodb_flush_log_at_trx_commit参数为 0
binlog_group_flush && thd_flush_log_at_trx_commit(NULL) == 0 条件成立，因此直接return了，那么这种情况下log_buffer_flush_to_disk函数不会调用，因此不会做redo刷盘。依赖master线程。
2.innodb_flush_log_at_trx_commit参数为 1
!binlog_group_flush || thd_flush_log_at_trx_commit(NULL) == 1 返回为1即为True，因此调用log_buffer_flush_to_disk(True)，因此需要做redo刷盘，也要做sync。
3.innodb_flush_log_at_trx_commit参数为 2
!binlog_group_flush || thd_flush_log_at_trx_commit(NULL) == 1 返回为0即为Flase，因此调用log_buffer_flush_to_disk(Flase)，因此需要做redo刷盘，不做sync。依赖OS的刷盘机制。
参考例子如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
mysql -u root -p -h 127.0.0.1 mysql> use test; Database changed mysql> set global innodb_flush_log_at_trx_commit=0; Query OK, 0 rows affected (0.03 sec) mysql> set global sync_binlog=0; Query OK, 0 rows affected (0.03 sec) mysql> set global max_allowed_packet=1024*1024*512; Query OK, 0 rows affected (0.00 sec) mysql> set global bulk_insert_buffer_size=512*1024*1024; Query OK, 0 rows affected (0.00 sec) mysql> set global innodb_buffer_pool_size=512*1024*1024; Query OK, 0 rows affected, 1 warning (0.09 sec) mysql> source /root/test.sql |
实际测试结果感觉还是不够快。
参考链接
Unable to find a target named `RunnerTests` in project `Runner.xcodeproj`, did find `Runner`
Flutter 2.x 升级到 3.10.1 版本之后，原来正常编译的项目，iOS环境下（Xcode Version 13.2.1 (13C100)），编译报错：
|
1 2 3 4 5 |
$ ios % pod install Analyzing dependencies [!] Unable to find a target named `RunnerTests` in project `Runner.xcodeproj`, did find `Runner`. [!] Automatically assigning platform `iOS` with version `11.0` on target `Runner` because no platform was specified. Please specify a platform for this target in your Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`. |
继续阅读Unable to find a target named `RunnerTests` in project `Runner.xcodeproj`, did find `Runner`
Thymeleaf调用Spring的Bean的函数
问题见：https://stackoverflow.com/questions/53803497
为什么按照官网上的写法调用@Bean报错：EL1057E: No bean resolver registered in the context to resolve access to bean
有时候我们希望自己去通过thymeleaf进行解析文本，调用自定义的函数。比如
|
1 2 3 |
Context context = new Context(); context.setVariables(dataMap); templateEngine.process(templateName, context); |
如果我们在模板里使用了 ${@beanName.method()}，此时会报错：
|
1 |
EL1057E: No bean resolver registered in the context to resolve access to bean |
但是如果我们是通过模板进行MVC页面渲染就不会报错，其实原因就是因为此时的context里缺少了spring的Beans的信息，通过spring mvc渲染时，框架会加入这些信息。那么手动渲染时我们也添加Beans的信息就可以了。
|
1 2 3 4 5 6 |
Context context = new Context(); context.setVariables(dataMap); ThymeleafEvaluationContext tec = new ThymeleafEvaluationContext(applicationContext, null); dataMap.put(ThymeleafEvaluationContext.THYMELEAF_EVALUATION_CONTEXT_CONTEXT_VARIABLE_NAME, tec); templateEngine.process(templateName, context); |
此时在进行渲染就正常了。
如果想更接近 Spring MVC 解析逻辑的，参考如代码：
|
1 2 3 4 5 6 7 8 9 10 11 |
@RequestMapping(value = "/uploadApk", produces = "text/javascript") @ResponseBody public String fragUploadApk(@NonNull final HttpServletRequest request, @NonNull final HttpServletResponse response) { final WebContext context = new WebContext(request, response, request.getServletContext(), request.getLocale()); # 此处使用 Spring MVC 默认的 FormattingConversionService.class 完成对数据的格式化（Springboot 2.7.11) final FormattingConversionService conversionService = applicationContext.getBean(FormattingConversionService.class); final ThymeleafEvaluationContext thymeleafEvaluationContext = new ThymeleafEvaluationContext(requireApplicationContext(), conversionService); context.setVariable(ThymeleafEvaluationContext.THYMELEAF_EVALUATION_CONTEXT_CONTEXT_VARIABLE_NAME, thymeleafEvaluationContext); templateEngine.process(templateName, context); } |
参考链接
vue3的provide和inject
浅析
provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
定义说明：这对选项是一起使用的。以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
通俗的说就是：组件得引入层次过多，我们的子孙组件想要获取祖先组件得资源，那么怎么办呢，总不能一直取父级往上吧，而且这样代码结构容易混乱。这个就是这对选项要干的事情。
provide：是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。
inject：一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。
一句话介绍：provide可以向所有子孙组件提供数据以及提供修改数据的方法，子孙组件用inject使用数据。
在组合式API中的用法
基本用法
似乎，组合式API的provide没有提供批量方法， 只能每个变量写一句。
顶级组件：
|
1 2 3 4 5 6 7 8 9 10 11 |
<template> <div> <son /> </div> </template> <script setup> import son from "./son.vue"; import { provide } from "vue"; provide("abc", "123"); </script> |
子组件：
|
1 2 3 4 5 6 7 8 9 |
<template> <div> <grandson /> </div> </template> <script setup> import grandson from "./grandson.vue"; </script> |
孙组件：
|
1 2 3 4 5 6 7 8 9 |
<template> <div>我是孙子</div> </template> <script setup> 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()生命周期里的同步代码
|
1 2 3 4 |
function xx() { console.log(inject("abc")) } xx() |
例三：让例一的xx函数作为鼠标事件回调，也是禁止的，原因也一样。
例四：放在Promise.then()也是禁止的，比如：
|
1 2 3 |
Promise.resolve().then(() => { console.log(inject("abc")) }) |
一级组件修改数据，孙子组件监听变更
provide的变量必须是响应式变量，孙子组件监听的变量也必须是响应式变量。
一级组件：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
孙子组件：
|
1 2 3 4 5 6 7 8 9 10 11 |
<template> <div>我是孙子 - {{abc}}</div> </template> <script setup> import { inject, watch } from "vue"; ref: abc = inject("abc"); watch($abc, () => { console.log(abc + '变了'); }); </script> |
孙子组件修改数据，一级组件监听变更
一级组件除了提供数据，还要提供一个修改数据的方法，孙子组件要接收并使用这个方法，这样修改的就是一级组件的数据，修改之后又会影响孙子组件的数据。
一级组件：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |
孙子组件：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
禁止孙子组件修改一级组件的数据
禁止的话，一级组件传递的变量必须是只读的，可以是readonly，也可以是shallowRef。这样孙子组件修改数据的话，一级组件不会有反应。
一级组件：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |
在配置项式API中的用法
跟Vue 2差不多，简单说一下。
provide
provide语法比在组合式API里要灵活，毕竟可以用对象。比如：
|
1 2 3 |
provide: { user: 'John Doe', }, |
如果要把data里的数据provide，说白了就是打算用this，provide要写成函数：
|
1 2 3 4 5 6 |
provide() { return { user: this.user, updateUser: this.updateUser } }, |
如果要提供计算属性，也是一样的道理，不过，如果不打算用配置项式计算属性，而是想用vue的computed方法
可以写成：
|
1 2 3 4 5 6 |
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的优势之一。
一级组件：
|
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 32 |
<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> |
孙子组件：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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> |