粉丝们务必加入微信粉丝群

所以，如果使用 Vue3 来开发项目的话，建议大家还是按官方推荐方式：使用组合API。函数中， 我们不能访问选项 API 中的属性，也不能使用。返回的属性可以被在选项API中使用。啥意思呢，我们来看个例子，假设我们有一个。同样，我们来看个例子，我们新建一个。在 User 组件中，我们声明一个。获取到对应的值，然后转成大写。

为了达到这个目的，我们可以把一个布尔值传下去，让子组件监听它。有时候，我们可能需要父组件在子组件中触发一个方法。获取到对应的 Child 实例，当组件挂载时，我们通过。这节课，我们来看一下如何从组件外部调用组件内的方法。子组件发出一个事件，告诉父组件，方法已经被成功触发了。的规则，但获取相对干净简介的代码，这也是值得的。这种方式也不错，不过，我们只能触发一次，就是将。的方式去获取组件中的内容。被发送到子组件中，事件被发送回父组件。父组件接收到子组件发出的方法后，将。我们来看个例子，假设，我们有一个。

这节课，我们来看下 Vue 中动态设置样式的几种方式。在 Vue 中有专门为。那如果不止两个类，3个或4个以上呢？用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。，否则关闭，这样就能简单动态的设置样式了。这里，我们只添加了一种样式，如果当。我经常用的一种模式就是使用。这里通过一个变量或计算属性。...

我们还可以使用渐进式增强。首先，加载微小的低分辨率图片，然后我们在它被加载后切换到全分辨率图片。然后，在我们示例中向下滚动直到显示图片时，你会看到图片在进入视口时被加载。，我们可以只在图像进入视口时才会加载它们。下面我们来看下简单的事例。最后，大家可能猜到了，通过对。，但它也有一个兼容的。...

经常会感到迷茫，有的小伙伴可能会想，基本数据类型用。如果，你还知道哪些，欢迎留言补充。更好，这都很难说，还是得看具体的场景。也可以用于对象，所以，到底是。在 Vue3 中，对于使用。最后一个是，我们可以将。这里，有几情况： 用。...

首先，我们需要一种方法来跟踪我们的历史记录，这个方法我们叫。中，还要判断一个当前是否是撤销操作，如果不是才需要调用。的情况下，每个更新都会被跟踪，即使在一次勾选中出现多个。这节课，我们来看下怎么实现一个可撤销组合函数。的值 push 到了 history 开头。当然，我们并不用实现这样的方法，可以直接使用。来监听 source 变化，并自动提交。第 0 个元素，删除后将更新的。第 0 个元素 赋值给了当前的。标志来表示停止追踪更新。，这样就简单的实现了撤销功能。接下来，我们通过使用。...

在Vue3 中封装一些组合方法时，有时候想用ref，有时候又不想使用。这节课，我们来介绍一种模式，可以让我们即可以使用ref，又可以不使用，从而让组合函数更具有灵活性。

建议在任何全局属性前加一个 $ ，防止与其他变量的命名冲突，而且这也是一个标准的惯例，开发者看到 值 $，基本不知道了该变量是全局变量了。在 Vue3 中跟 Vue2不太一样， Vue3 中每个 Vue 应用都会暴露一个包含其配置项的。声明了全局属性后，我们在任何组件中都可以访问该属性了，在选项API 中可以通过。并返回一个对象，接着我们通过对象解构的方式就能拿到我们声明的全局属性了。但在组合API中，我们不能用这种方式获取全局属性，因为访问不到。这节课，我们来看下，怎么在 Vue 中添加全局属性。...

这里，只举例一个很简单的组件事例，大家在封装一些简单或者复杂组件的时候，可以多多思考，到底是。参数只是单纯为了显示按钮的文本，没有用于其它操作。旁边放个图标，显示我们当前的方式满足不了需求。现在的代码看起来更简洁了，但更重要的是我们能够更灵活地使用。方式更能提高组件的可重用性，什么意思呢？那这个问题，留给大家去实践 了。之间怎么选，才更能提高组件可重用性。外面在加些样式，比如加个。...

所设，我们外面在调用该组件时，想对 list 内容进行一些样式上的包装，那我们现在这种写法是满足不了。注意：大家可能对递归组件 不熟悉，一般用递归组件需要给个 name，也就是组件名称，然后在 模板中直接使用该 name 就是调用自身。所以，这里我们需要提供一个默认插槽的功能，但同时又想把当前的。这里，我们通过作用域插槽拿到了 item 内容，然后我们用。首先，我们先来看下什么是递归组组件，假设，我们有一个。组件，因为我们是递归调用自己的，所以我们使用带值的。了解了递归组件后，我们来看看递归插槽。...

对象是没有任何内容的，这是因为，我们在父组件中没有使用到 User 组件里面的插槽。，默认插槽的 key 是 default，其它命名插槽的 key，就是插槽的名称。对象有没有内容，在于我们在外面调用该组件时，有没有使用该组件的插槽功能。插槽，如果没有，我们就需要隐藏它，怎么做呢？可能会影响到我们的布局，所以，我们需要判断当前是否有用到。插槽，那么在渲染 User 组件时，就会多渲染出来一个。在 User 组件中，我们声明了两个插槽，一个是默认。好，利用这一特点，我们就可以有条件来渲染插槽了。......

这节课，我们来看下在v-for中的几种解构方式。

新增两个按钮，一个是改变绑定幸免于难的字体大小，一个是改变绑定元素的颜色。当点击按钮时，我们在点击事件里面去更改了这两个变量的值，分别是。实际上，如果指令需要多个值，可以传入一个 JavaScript 对象字面量。不幸的是，如果你想要多个参数，Vue 会把它们当作不同的指令。中，因为点击按钮改变了指令的参数和值，所以，我们需要在。两个属性，然后点击按钮时，我们更改了这两个属性的值。这里，我们给指令传入一个对象的值，包含。的值就是我们传入的对象，然后我们通过。，但我们也可以建立自己的自己的指令。...

这节课，我们来看下Vue3中新出的一些特殊选择器。

访问时，我们想指定该组件中的哪些属性可被访问，哪些不可访问。那怎么来实现私有属性呢？方式，那么情况是与选项API方式完全相反的，就是外面访问不到里面的内容，除非使用。如上所示，我们声明了一个useRef表示对User组件的引用，然后在。是一个编译器宏，而不是一个实际的函数，所以我们不需要。接着，在父组件中，我们引入User并给它一个。，它是一个数组，数组元素表示要暴露出来的属性。值，那么，我们可以在User中使用。比如，在User组件中，我们只想暴露。的值，我们已经获取不到了，它为。............

但state对象的car属性可能不存在，当car不存在值，我们需要给个默认值，这个时候就可以用到。更多关于Vue的资源信息，可关注公众号《大迁世界》，每日会推送关于前端的最新信息！我们来看个例子，假设我们想为state对象的car属性创建一个名为。时，此时state.foo的值也跟着变，因为。也可以提供一个默认值，这个点可能大家就比较少见了。这节课，我们来看一下toRef的默认值。会保持对其源对象属性的响应连接，所以，当。这里我们为state对象的。...

来监听，但watch直接监听对象时，手动修改对象的某个属性值会发现，监听并没有生效，此时我们需要用到。这里存在一个问题，就是我们只要监听name的变化而不是监听对象的所有属性变化，这时又要怎么做呢？这里当我们点击按钮时，我们在点击事件里面改变了name属性的值，这对大家来说都好理解。时它会一层层遍历给对象的所有属性都加上这个监听函数，这样可以检测到对象的每个属性变化。这样在User组件中，watch是不是被触发的，因为我们只关心。假设，某些场景下，在User组件中，当传入的。...

的时，图片的是圆角是没有变化的，或者对应的单词拼错了，也是没有圆角的。函数接收一个参数，这个参数就是我们从父组件传进来的值，这里使用includes来判断，传入进来的值是否在我们数组内，如果是，则返回。参数，然后，我们用计算属性根据传入的imgStyle参数给img加圆角样式，默认是没有圆角的，如果传入的。所以，当用户传入是错误的值时，我们封装的组件能够给出提示是很重要的，那怎么判断用户传入的值是在我们的约定中呢？这节课，我们来看下，怎么将一个props限制在一个特定的值的集合中。......

今天，我们来学习一下Vue技巧小册，本节是第一节课，也就是标题所示用更简单的方式来传递大量的props，事例是用vue3来演示的，当然在vue2中也适用。这里，我们定义了一个userEventHandlers对象，对象的属性名就是我们User组件发出的自定义事件名，最后使用v-on绑定了。这里有个问题，如果User组件不止三个参数，比如有10、20，那我们得一个一个传，显然不怎么高效，那么有什么办法可以解决呢？该组件接收三个参数，分别是用户姓名、工作、以及年龄。...