Vue3
文章平均质量分 72
从setup和composition API开始逐步分析Vue3新特性,并且和Vue2进行对比。
黑猫几绛
这个作者很懒,什么都没留下…
展开
-
详细分析 Vue3 文档
详细分析文档将文档中的特殊部分向外延伸讲解前前后后写了一个月看完文档后感觉挺有提升的原创 2022-01-26 08:27:23 · 1964 阅读 · 0 评论 -
拥抱Vue3 (五) 组件通信 provide与inject 附Vue3版本TodoList源代码
看完了前面四篇文章后我们就可以尝试做一下传统的TodoList案例了。接下来的内容基于你曾经写过或者听说过TodoList这个案例,如果还没有手动实现过,建议先试试在Vue2中练练手。我认为这一个案例的经典程度不亚于原生js写轮播图。创建静态样式、抽离组件等过程在这里就先跳过,这些内容和Vue2无甚差别,在文章的最后我将贴出全部代码。当写到todo-item组件中根据checkbox修改待办/完成状态时,按照传统的思路,我们会在数据的拥有者组件中放置todos数据,然后创建一个函数,将函数名传递给子原创 2021-10-17 12:22:07 · 327 阅读 · 0 评论 -
拥抱Vue3 (四) 计算属性与侦听属性
在Vue3中computed计算属性被抽离出去了,要用的时候按需引入,然后作为函数调用。基本的使用方法和Vue2相同,唯一不同的就是需要自己引入这一点。watch也是一样,注重了函数式编程与按需引入的特色,个人感觉逐React化,和useEffect有些类似。在情况一中你可能会问,在监视sum的时候为什么不是sum.value,在前面的专栏文章中介绍的是,通过数据.value才能拿到他所对应的值。事实上,Vue3中监视的是一个结构而不是属性的值。在写情况三之前,我们可...原创 2021-10-15 12:31:55 · 466 阅读 · 2 评论 -
拥抱Vue3 (三) ref 与 reactive以及响应式原理
一、ref 包装基本数据类型数据在第二篇文章中举例的时候,我们创建了非响应式的数据,在控制台中查看数据发现并不存在get与set方法。在查了文档后发现,Vue3中需要使用一个新的方法 `ref ` 去让数据变成响应式的。<template> <div class="main"> <h1>我叫{{name}},我今年{{age}}了</h1> <button @click="changeInfo">修改<...原创 2021-10-14 17:28:06 · 1831 阅读 · 0 评论 -
拥抱Vue3 (二) setup函数
概述一、 初识setup函数组件中所用到的:数据、方法等等均要配置在setup中,这也就意味着在Vue2中写的data、methods在这里都不再推荐使用。这样的配置让对象式编程趋近于了函数式编程。<script>export default { name: 'App', // 最为原始的对象写法是这样,但是通过es6我们可以简写 // setup: function(){} setup () { // 数据 let name = '黑猫几..原创 2021-10-14 17:27:27 · 811 阅读 · 1 评论 -
拥抱Vue3 (一) main.js的变化
我们还是尝试使用Vue-cli来创建Vue3的项目,需要注意的是你的Vue-cli版本需要在@4.15.0以上才能支持Vue3项目的创建。在创建项目之前可以在cmd中输入Vue -v来查看cli的版本。创建好项目后和Vue2时候一样,首先来看看整个项目的入口文件main.js。import { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')我们可以发现,引入的不再是Vue构造函..原创 2021-10-14 13:35:22 · 2300 阅读 · 0 评论