vue3.5更新内容详解 #web前端（vue升级版本）

作为vue官方团队成员，也是跟大家分享一下vue3.5更新的新功能。首先在项目里面现在可以直接去安装vue3.5了，安装完成之后在项目里面就可以直接用了。

·首先在这边说一个对使用影响比较大的功能，就是props的结构。结构出来可以在这边给它默认值，像以前可能要调些其他的APIwithDefaults，可能要这样，这样就感觉不太友好了。现在就可以这样，就是这样结构出来，然后把默认值给它就可以用了。

在这边来试一下，在APP里面传递了一个count，message没有传，就用默认的hello。count传了一个1，到页面看一下，这边message是hello，count是1，点击的时候也是显示的，它是这么一个功能。

count解构出来的这些东西，用watch去监听的时候有一点问题，就是count不能直接传递过去，不能这样直接传递过去，这样传递过去会报错。像以前直接这样写也是会报错的，也不能监听，要给它传递一个Getter，然后返回count，这样就可以了。

·来看一下，打开控制台，点击，这个时候就可以监听到了，是这么一个东西。

·来看一下第二个，第二个就是新增了一个左式函数，叫useld，就是useld函数。这个函数返回全局的唯一的ID，这边返回了一个ID，放到hello word里面可能就变成2了，等于1了，它是一个自增的唯一的ID。

但是它还是有一些问题，在这边用的时候只能确保在同一个createApp的实例里面是唯一的，要是多个就不能保证了。比如这边写了一个案例，如果是多个的情况下就会有这么一个问题，把这个也复制一份到上面，就给它一个APP一。

现在是两个create APP，到页面来看一下，发现这两个好像都是一样的，这个是APP一，两个都是一样的，这时候就不能保证唯一了。

有什么办法解决？可以给它加一个前缀，就是这样，APP点儿config，点儿id prefix，去给它加一个前缀，比如要给它加一个APP1，横杠这样的，这样就可以确保是唯一的了。但是要确保每一个APP加的前缀是不一样的，是这么一个问题，大家在使用的时候注意点就行。

这是第二个问题，第二个功能就已经讲完了，接着往下看，它还有哪些功能？就是还加了一个这个东西，就是use template REF，比如EL，写个use template REF，这时候APP干啥用的？它可以去传，比如这边绑定了一个button，elButton，写个button，把ref的字符串传递给它，传递给它之后就可以拿到DOM了，跟以前用的ref是一样的。比如以前用的时候是这样的，以前都是这样用的，比如要搞巴腾，就这样去拿到DOM，这样是可以拿到button的，再拿到按钮，但是现在可以用这种方式去拿，这样也可以拿到。

为什么出API？countis{c是因为之前经常用ref来声明DOM的引用，有些人会觉得ref是用来声明详细数据的，在这边声明了DOM的引用或者组件的实例的引用，就感觉不是很协调，就出了这么一个一篇。

当然这边也可以传泛型，counti也可以传HTMLButtonElement，这样就可以，这个时候就变成了html，count is{coun，有可能是这样的，有可能在这里没有传给它，所以就变成了null，是这么一个问题。

当然也可以给它改名字，就是button EL，这样也可以，现在就不受命名的限制了，只需要把REF传递过去就可以了，至于变量叫什么名字就无所谓了，像以前用ref的时候必须是一样，这是这么一个功能。

接着来看下一个功能，下一个功能是什么？就是它加了一个函数，叫on water clean up，函数是干什么的？比如这里有个watch，监听了count content，每次变的时候都去给window上面加一个click事件，这个时候打印一下，click然后newVal，让它立即执行，让它立即执行好，到页面上来看一下。

·这个时候点击，这个时候就会把click还有1帮我打印出来，但是这个时候有一个问题，什么问题？就是比如在这边count++变成2了之后再点击，点击时间就加了两次。

·onWatchCleanUp就是用来清理上一色的副作用，比如可以在这边给它remove掉函数，要拿出来，在下面给它removeEventListener，这样就可以了。

·这个函数接收的回调会在下一次执行water之前去执行，就是在下一次执行之前先执行函数，然后把注册的事件给清除掉了。

·现在是1，点击这时候变2了，这时候就是2，2就不会去重复执行上一次的click了，是这么一个功能。

·当然这边也是有的，就是在这边也可以拿到order，后面有一个东西，这两个功能是一样的，来看一下，也是link报错了，来看一下，点击，刷新一下，这个时候是1，点击，变2了，它们两个功能是一样的。

·新功能就加了这么多，还有就是进行了一些显示系统的更新，就是显示系统的更新，更新然后就是优化了一些内存占用和依赖追踪的性能，这个在正常使用的时候是体验不到的，就是也体会不太能体会的到，除非显示的对象很大的情况下可能可以体会到。

有这么一个问题，所以对使用上面没有什么影响，就是使用的时候之前是怎么用的，还是怎么用就可以了。

今天的视频就到这里了，下期见，bye-bye。