--- theme: smartblue highlight: atom-one-dark --- ## 前言记录一下笔记，给各位小伙伴们分享一些常用的Vue3新特性及哪些方法发生了变更。我这里只写一些常用的，更多请看Vue3官网[这里](https://v3.cn.vuejs.org/guide/installation.html) ## 组件v-model支持参数在Vue2.x时，我们要想给子组件传值，还得单独传入。Vue3.x直接以`v-model:xxx`形式传入参数，并且配合修饰符.sync进行数据同步更新。 **App.vue** ```javascript ``` **Input.vue** ```javascript ``` **效果** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eb992bf6f021456ea94cdfd80f1e3690~tplv-k3u1fbpfcp-zoom-1.image) ## 组件支持多个v-model 在Vue3.x中支持在单个组件上可以创建多个v-model绑定。 **App.vue** ```javascript ``` **Input.vue** ```javascript ``` **效果** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f570ebe6adf443518ac62ae2add28f15~tplv-k3u1fbpfcp-zoom-1.image) ## Setup `setup`函数是一个新的组件选项。作为在组件内使用`Composition Api`的入口点。下面我们分为4个方面来讲解它 - 调用时机 - this指向 - 函数参数 - 返回值 ### 调用时机创建组件实例，然后初始化`props`，紧接着就调用`setup`函数。从生命周期的角度来看，它会在`beforeCreate`之前执行。也就是创建组件先执行`setup`、`beforeCreate`、`create`。 ```javascript ``` ### this指向由于不能在`setup`函数中使用`data`、`methods`，为了避免使用`Vue`出错，所以把`setup`函数中`this`修改为了`undefined`。 ```javascript ``` ### 函数参数 - props - context #### props 接收组件传递过来的所有数据，并且都是响应式的。 ```javascript ``` > 注意一点，props数据不能使用解构，否则响应式数据失效 ```javascript ``` #### context 该参数提供一个上下文对象，从原来的2.x中选择性的暴露了一些属性。 - attrs - slots - emit ```javascript ``` 上面，`attrs`和`slots`都是内部组件实例上对应项的代理，可以确保在更新后仍然还是最新的值。所以这里可以使用解构语法。 ### 返回值可以将`setup`函数返回值渲染到页面上。但前提是，`setup`返回值必须是一个对象，否则返回其它值则渲染无效。 ```javascript ``` ## Reactive 该方法接收一个参数`{}`创建一个响应式对象。跟Vue2.x的`Vue.observable`一样。如果该参数不是对象的话，也可以渲染到模板上，但不是响应式的数据。 ```javascript ``` ## Ref 该方法接收一个参数，可以是单个值，也可以是一个对象，并且都是响应式的数据。当传入一个对象时`{}`，内部将调用`reactive`方法进行转换为响应式数据。返回值里面带有`.value`属性取值，当使用模板渲染的时候可省去`.value`。 ```javascript ``` ## Computed 该方法可以传入一个函数，默认该函数就是`getter`，不管`getter`返回值为一个`ref`响应式数据还是一个`普通变量`，数据都是`只读`不能改变。 ```javascript ``` 传入一个对象`set`和`get`函数方法，这样就可以修改啦 ```javascript ``` ## Readonly 该方法接收传入一个对象，默认是只读功能，是深层对象只读，不管嵌套多少层的属性都是只读状态。 ```javascript ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d18eb46c24db4a70858dd070d16c8870~tplv-k3u1fbpfcp-zoom-1.image) ## WatchEffect 该方法接收一个函数并且立即执行，并当该函数里的变量变更时，重新执行该函数。该方法无法获取到原值，只能是改变之后的值。 > 如果要监听哪个值，需要在该函数里写出来，否则监听无效 ```javascript import { ref, watchEffect } from "vue" export default { name: 'test', setup() { let name = ref("蛙人"); let age = ref(23); watchEffect(() => { name.value; // 监听name age.value; // 监听age console.log(name.value) console.log(age.value) }) setTimeout(() => { name.value = "前端娱乐圈" }, 5000) setTimeout(() => { age.value = 18 }, 1000) } } ``` #### 取消监听有时候我们想在触发一定的条件后取消监听。这时可以执行`watchEffect`的返回值。 ```javascript import { ref, watchEffect } from "vue" export default { name: 'test', setup() { let name = ref("蛙人"); let age = ref(23); let stop = watchEffect(() => { name.value; // 监听name age.value; // 监听age console.log(name.value) console.log(age.value) }) setTimeout(() => { name.value = "前端娱乐圈" }, 5000) setTimeout(() => { age.value = 18; setTimeout(stop, 300) }, 1000) } } ``` ## Watch `watch`等同于Vue2.x中的`this.$watch`，`watch`需要监听特定数据，默认情况是懒执行，也就是只有当数据发生变化时才执行第二个参数函数。对比`WatchEffect` ，`Watch`允许我们 - 懒执行函数 - 更明确哪些状态改变触发监听器 - 可以监听获取到变化前后的值 ### 监听单个值 ```javascript ``` ### 监听多个值监听多个值，返回的是一个数组对象。 ```javascript ``` ## 生命周期系列在Vue3.X也可以在`setup`函数下使用生命周期，这些钩子函数写法跟之前的生命周期写法不同。 > 注意：这些生命周期写法只能在`setup`函数下使用，在其它地方使用则会报错。 **与Vue2.x版本生命周期相对应的组合式Api** - beforeCreate --> setup - created --> setup - beforeMount --> onBeforeMount - mounted --> onMounted - beforeUpdate --> onBeforeUpdate - updated --> onUpdated - beforeDestroy --> onBeforeUnmount - destroyed --> onUnmount 下面我们来看一下这些钩子的写法。钩子函数里面是一个回调函数。 ```javascript ``` ## Provide && Inject 该方法和Vue2.x的 `provide`、`inject`一样的。但是Vue3新特性这俩方法只能在`setup`中使用。 - Provide：接收2个参数，第一个`key`值，第二个`value`值，进行传递 - Inject：接收2个参数，第一个是`provide`的`key`值，默认第二个参数可选，可以设置默认值(当找不到key值，设置一个默认值) **App.vue** ```javascript ``` **test.vue** ```javascript ``` ## Refs 该方法相当于Vue2.x的`refs`一样获取元素，那么在`setup`中配合使用`ref`对象进行获取 ```javascript ``` ## isReadonly 用于检测该数据是不是可读数据。返回一个`Boolean`类型。 ```javascript ``` ## isRef 用于检测该数据是不是ref响应式数据。返回一个`Boolean`类型。 ```javascript ``` ## isReactive 用于检测该数据是不是`reacttive`响应式数据。返回一个`Boolean`类型。 ```javascript ``` ## 移除过滤器filters 在Vue3.x中移除过滤器，不在支持。建议使用`computed`去替代。贴一个官网例子 ```javascript ``` ## 不再限制Template一个根节点 Vue3.x中将不在限制模板中只有一个根节点，根组件可以任意多个元素。 ```javascript ``` ## 自定义v-model修饰符 Vue3.x中，添加了可以自定义修饰符，如Api提供的内置方法`.trim`，新特性我们也可以自定义啦。下面就来演示一下写一个转换字符串大写的修饰符。 **App.vue** ```javascript ``` **Input.vue** ```javascript ``` 上面方法，必须传入`props`值，`Modifiers`必须写定义为一个空对象。 > 特别需要注意一点：如果你的`v-model`参数值为`str`，那么组件里面接收的值，全部为str开头，如：props里面的 strModifiers，str **效果：** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fdbde61087e54eed9a9574a2d14dc66e~tplv-k3u1fbpfcp-zoom-1.image) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0dd50726fe24447f9dbf68e867c727be~tplv-k3u1fbpfcp-zoom-1.image) ## 废弃on，off，once实例方法 Vue3.x中 `$on`，`$off` 和 `$once` 实例方法已被移除，应用实例不再实现事件触发接口。 ```javascript ``` ## 自定义指令更改在Vue3.x中自定义指定写法稍有更改，看下列。 - bind --> beforeMount 指令绑定到元素后发生。只发生一次 - inserted --> mounted 元素插入到父DOM后发生 - beforeUpdate: Vue3.x新添加的，这是在元素更新之前调用， - componentUpdated --> updated - beforeUnmount : Vue3.x新添加的，将在卸载元素前调用 - unbind --> unmounted **main.js** ```javascript import { createApp } from 'vue' import App from './App.vue' let main = createApp(App) main.directive("custom", { beforeMount(el, attr) { console.log(el, attr) }, updated() { console.log("updated") }, unmounted() { console.log("移除") } }) main.mount('#app') ``` **App.vue** ```javascript ``` ## 感谢谢谢你读完本篇文章，希望对你能有所帮助，如有问题欢迎各位指正。我是蛙人(✿◡‿◡)，如果觉得写得可以的话，请点个赞吧❤。感兴趣的小伙伴可以加入 [[ 前端娱乐圈交流群 ]](https://qinzhiying.github.io) 欢迎大家一起来交流讨论写作不易，**「点赞」+「在看」+「转发」** 谢谢支持❤ ## 往期好文 [《聊聊在Vue项目中使用Decorator装饰器》](https://juejin.cn/post/6939703832930680840) [《分享15个Webpack实用的插件！！！》](https://juejin.cn/post/6944940506862485511) [《手把手教你写一个Vue组件发布到npm且可外链引入使用》](https://juejin.cn/post/6943793273395740680) [《分享12个Webpack中常用的Loader》](https://juejin.cn/post/6942322281913778206) [《聊聊什么是CommonJs和Es Module及它们的区别》](https://juejin.cn/post/6938581764432461854) [《这些工作中用到的JavaScript小技巧你都知道吗？》](https://juejin.cn/post/6937092511508725774) [《【建议收藏】分享一些工作中常用的Git命令及特殊问题场景怎么解决》](https://juejin.cn/post/6934487656873082887) ## 参考 https://v3.cn.vuejs.org/

Bank Account Balance