正文

不习惯的vue3起步の一：＜scriptsetup＞(代码片段)

空城机  空城机  2022-11-29  560

关键词：

序

Vue3虽然说是Vue2的升级版，但里面不一样的地方还是挺多的，并且相比Vue2能更好的使用typescript了

先从网上找视频学习：https://www.bilibili.com/video/BV1gf4y1W783

Vue + TS技术历史变革
Vite还是Webpack
Typescript你还不熟？
本套实战课程总结

Vue + TS技术历史变革

对于vue和typescript的结合使用，在vue2中就已经出现了，那就是vue-class-component，但使用起来其实不是很方便，还不如不用typescript

在Vue2 --> Vue3 过渡阶段出现了 @vue/composition-api和vuex-composition-helpers

vue3时代： xxx@next + Vite

在Vue3中性能提升较大：

打包大小减少
初次渲染快，更新渲染快
内存减少
使用Proxy代替definePropery实现数据响应式
重写虚拟DOM的实现（把没有用到的DOM干掉）和Tree-Shaking（摇树：在程序中会有一个入口文件作为树的树干，会有很多依赖文件像树的树枝，在打包过程中，会将一些没有用到的代码或文件删掉，让代码变得更紧密）

Vue3新增特性:

新增CompositionAPI
setup
- ref和reactive
- computed和watch
- 新的生命周期函数
- provide和inject
新组件
- Fragment 文档碎片
- Teleport 瞬移组件的位置
- Suspense 异步加载组件的loading界面

Vite还是Webpack

Vite是vue3本身推荐的构建工具，编译速度非常快

webpack是老牌构建工具，vue2时代vue cli这样的打包都是需要用到

如果就是要用vue开发，并且针对的浏览器版本较高，不需要兼容开发的，那么推荐使用Vite

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TA5MFe3F-1655814635107)(./img/a_01_vue3/vue3基础-进阶.png)]

Vite的世界

Vite中文网 https://vitejs.cn/

先在vs code中打开终端，使用yarn创建一个vite项目: yarn create vite first-vite-demo --template vue

PS: 在视频教程中使用的vue3版本比我的要早一些了，我的是vue3.2.x了，所以会有一些不同。

错误1

我这里遇到了一个警告和一个错误，警告是yarn版本过低了，错误是

警告通过升级yarn即可消除，npm install --global yarn

错误是说C:\\Program 不是内部或外部命令，也不是可运行的程序或批处理文件

这里解决的方式有挺多的，不过我选择了重新安装node，具体安装可参考：https://www.jianshu.com/p/30ba1da2bde1 。这里需要把yarn全局位置也配置一下。

现在就可以使用命令正确创建了：

创建出来的项目结构：

然后可以使用yarn dev运行项目，打开默认的url地址

可以看到页面正常运行出来了，不过当我打开src文件夹中的App.vue时会在界面上出现一个红色波浪线报错，虽然不会影响程序的运行，但是还是看着很不舒服

错误2

这主要是因为插件vetur的关系，在vue2中，template只能有一个根元素，但是在vue3中则没有这个限制，所以可以对vetur检查语法功能设置进行修改。

将里面的Template勾选取消，然后重启vs code，这样重新打开App.vue就不会出现红色波浪线了

入口文件

在程序中，依旧还是以main.js为主干，是程序的入口文件。在vue2中，创建vue实例使用new Vue，而在vue3中则是可以直接使用createApp方法

// 程序入口文件，主干
// createApp用来创建vue3的实例
import  createApp  from 'vue'
// 引入App组件
import App from './App.vue'
// 创建App应用返回对应的实例对象，调用mount方法进行挂载
createApp(App).mount('#app')

引入组件

在Vue3中，使用vite创建的示例里，App.vue中引入使用HelloWorld组件，并没有写components包括，这是因为使用了setup

setup语法糖

关于单文件组件<script setup>介绍:

https://v3.cn.vuejs.org/api/sfc-script-setup.html

基本语法：<script setup>，在原始的 script 标签上附加上 setup

改变1：组件自动注册

像上面示例所说，使用了setup语法糖之后，组件直接import引入进来就可以使用了

改变2：属性和方法直接在`template`中使用，无需return返回

之前vue3.0中会有一个setup函数，要暴露变量必须reutrn出来，这样才能在template中使用。(当然目前3.2也是同样支持这样写的)

<template>
    <h1> num1 </h1>

</template>

<script>
import  ref  from 'vue'

export default 
    name: 'Basic',
    setup() 
        let num1 = ref(123)
        return 
            num1
        
    

</script>

现在使用了语法糖之后就不需要写return和export default了，直接定义使用即可。同样也能达到上面的效果：

<template>
    <h1> num1 </h1>

</template>

<script setup>
    import  ref  from 'vue'

    let num1 = ref(123);
</script>

改变3：关系组件的数据传递

在3.0版本中，因为使用的是setup函数，可以将props数据存放作为参数传入。

export default 
    name: 'Basic',
    props: 
        name: String,
        age: Number
    ,
    setup(props) 
        console.log(props.name, props.age)
        return

PS: 这里对于props数据的解析，使用es6的解构方式有问题，会消除prop的响应性。

这里举一个例子，点击按钮改变数值，但是在子组件中，使用es6解构出来的数值不会随之改变，需要使用toRefs方法进行解构。

父组件：

<template>
  <Basic name="张三" :age="age"></Basic>
  <button @click="change()">改变</button>
</template>

<script setup>
  import Basic from './components/Demo/Basic.vue'
  import  ref  from 'vue'
  let age = ref(15)
  function change() 
    age.value++
  
</script>

子组件：

<template>
    <h1> age1  :  age2 </h1>
</template>

<script>
import  ref, toRefs  from 'vue'
export default 
    name: 'Basic',
    props: 
        name: String,
        age: Number
    ,
    setup(props) 
        // es6解构
        let  name: name1, age: age1  = props;

        // 响应式状态解构toRefs
        let  name: name2, age: age2  = toRefs(props)

        return 
            age1,
            age2,
        
    

</script>

效果：可以看到es6解构出来的数值只是固定的，不会随父组件中数值变化而响应式改变。

说完3.0，现在来看看3.2使用语法糖之后的用法：

对于props的接收可以使用defineProps方法，如果需要给父组件传值可以使用defineEmits方法。defineProps和defineEmits在语法糖中可以不用引入，不过我在下面的示例中还是写了一下。

子组件：

<template>
    <h1> age </h1>
    <button @click="setupChange"> setup语法糖改变 </button>
</template>

<script setup>
    import  ref, defineProps, defineEmits  from 'vue'
    // 获取props
    let props = defineProps(
        age: Number
    ) 
    // 传值
    let emits = defineEmits(['father-change'])
    let setupChange = () =>
        emits('father-change', props.age + 2)
    
</script>

父组件：

<BasicSetup :age="age" @fatherChange="fatherChange"></BasicSetup>

效果：

改变4：获取attrs和slots

一般而言，在<script setup> 使用 slots 和 attrs 的情况应该是很罕见的。可以在模板中通过 $slots 和 $attrs 来访问它们。在你的确需要使用它们的罕见场景中，可以分别用 useSlots 和 useAttrs 两个辅助函数

这里关于$attrs使用可参考：https://juejin.cn/post/7103271635783778311

这里就不详细展开了

改变5： defineExopse

在setup语法糖中，外部父组件默认是不能使用 $r e f s 来获取子组件内定义的属性值或调用方法的（在 v u e 3 中，不可以直接使用 t h i s .$ refs了）。这里<script setup>类似于形成了一个闭包，所以为了外部能够使用，可以使用defineExopse将外部需要的属性暴露出去。

父组件：

<template>
  <BasicSetup :age="age" @fatherChange="fatherChange"
    dataStatus="activated" ref="basic2"
  ></BasicSetup>

  <button @click="change()">改变</button>
</template>

<script setup>
  import BasicSetup from './components/Demo/BasicSetup.vue'
  import  ref, onMounted  from 'vue'

    ......
  // 这里basic2名称要与上面子组件定义的ref名称相同
  let basic2 = ref()
  // 这里需要在onMounted中，否认是undefined
  onMounted(() => 
    console.log(basic2.value.setupchild); // 100
  );

</script>

子组件：

<script setup>
    ......
    let setupchild = 100;
    defineExpose(
        setupchild
    );
</script>

暂时先告一段落，看<script setup>语法糖就花了好久。

可能是我刚刚开始学习Vue3的关系吧，<script setup>感觉代码量多了会很复杂，看起来更加不清晰了，而且可能从setup函数看还有点vue2的影子，这个语法糖真的就和vue2完全不一样了。

挺多东西要推翻重来的，没有this真的不习惯了。

不习惯的vue3起步の一：＜scriptsetup＞(代码片段)

序Vue3虽然说是Vue2的升级版，但里面不一样的地方还是挺多的，并且相比Vue2能更好的使用typescript了先从网上找视频学习：https://www.bilibili.com/video/BV1gf4y1W783目录：Vue+TS技术历史变革Vite还是WebpackTypescript你还不熟&... 查看详情

不习惯的vue3起步五のapihooks封装(代码片段)

使用请求Hooks完善业务在前端开发过程中，对于Api接口通常会进行封装，这里vue3中因为添加了typescript，所以也再来写写。本次接口使用的是网上找的公开api：https://tenapi.cn/zhihuresou/，请求出来的数据是知乎热... 查看详情

不习惯的vue3起步五のapihooks封装(代码片段)

不习惯的vue3起步三のcomputed和watch(代码片段)

计算属性和侦听器Computed计算属性在模板内表达式非常简单，如果在模板内放入过多的逻辑会使得模板过重并且难以维护。示例：<template><div>admin.friends.filter((item)=>if(item.name=='李四')returntrueelseretu... 查看详情

不习惯的vue3起步三のcomputed和watch(代码片段)

不习惯的vue3起步六のecharts绘制下钻地图(代码片段)

序看过一些可视化大屏展示地图的例子，准备动手做做。既然要开始比制作，那么先把目标定好，做一个展示中国城市的下钻地图使用：Vue3ViteTypescriptecharts实现效果：准备工作创建项目因为准备使用Vue3+Vite... 查看详情

不习惯的vue3起步六のecharts绘制下钻地图(代码片段)

不习惯的vue3起步四の生命周期&provide/inject(代码片段)

生命周期Vue3的生命周期大部分还是和Vue2一样，除了beforeCreate和created，这两个已经替换成setup了。在Vue3中，需要哪个生命周期钩子也可以用哪个，使用时需要用import从Vue中进行导入。选项APIHook(setup)作用beforeCreate... 查看详情

不习惯的vue3起步六のecharts绘制下钻地图(代码片段)

不习惯的vue3起步二のalias别名ref和reactive(代码片段)

序在之前的学习中，对vue3和vite做了一下简单的了解。也知道了vue3，相较于vue2，对typescript的支持更加好了。所以直接从ts+vue3一起来吧。（之前我对typescript基础也有过学习，忘记也可以翻看资料《typescript... 查看详情

不习惯的vue3起步二のalias别名ref和reactive(代码片段)

不习惯的vue3起步三のcomputed和watch(代码片段)

不习惯的vue3起步五のapihooks封装(代码片段)

vue3.2的scriptsetup语法(代码片段)

vue3.2已经正式支持<scriptsetup>语法，并且现在就可以在生产环境下使用了，接下开始学习基本用法。<scriptsetup>是在单文件组件(SFC)中使用组合式API的编译时语法糖。相比于普通的<script>语法，它具有更多优... 查看详情

vue3中＜scriptsetup＞和setup函数的区别(代码片段)

... script一起使用十一、顶层 await十二、限制官网：<scriptsetup>是在单文件组件(SFC)中使用组合式API的编译时语法糖。当同时使用SFC与组合式API时该语法查看详情

vue3中＜scriptsetup＞和setup函数的区别(代码片段)

vue3.2正式发布，<scriptsetup;+ts+volar=真香(代码片段)

8月5日，Vue.js作者尤雨溪在博客上宣布Vue.js3.2版本正式发布。本文为相关内容的中文翻译(文章来之：前端之巅)。在这里，我们高兴地宣布Vue.js3.2正式发布！此版本包含一系列重要的新功能与性能改进，但并不... 查看详情

解决：使用vue3scriptsetup时eslint报错‘defineprops‘isnotdefined

参考技术AVue3的ScriptSetup语法引入了defineProps、defineEmits、defineExpose、withDefaults的编译器宏。然而某些情况下，ESLint会报错以上编译器宏函数未定义。本文将介绍两种解决方案来解决这个问题（假定你的项目使用Vue-Cli进行初始化）... 查看详情

正文

不习惯的vue3起步の一：＜scriptsetup＞(代码片段)

序

Vue + TS技术历史变革

Vite还是Webpack

Vite的世界

错误1

错误2

入口文件

引入组件

setup语法糖

改变1： 组件自动注册

改变2：属性和方法直接在template中使用，无需return返回

改变3：关系组件的数据传递

改变4：获取attrs和slots

改变5： defineExopse

不习惯的vue3起步の一：＜scriptsetup＞(代码片段)

不习惯的vue3起步五のapihooks封装(代码片段)

不习惯的vue3起步五のapihooks封装(代码片段)

不习惯的vue3起步三のcomputed和watch(代码片段)

不习惯的vue3起步三のcomputed和watch(代码片段)

不习惯的vue3起步六のecharts绘制下钻地图(代码片段)

不习惯的vue3起步六のecharts绘制下钻地图(代码片段)

不习惯的vue3起步四の生命周期&provide/inject(代码片段)

不习惯的vue3起步六のecharts绘制下钻地图(代码片段)

不习惯的vue3起步二のalias别名ref和reactive(代码片段)

不习惯的vue3起步二のalias别名ref和reactive(代码片段)

不习惯的vue3起步三のcomputed和watch(代码片段)

不习惯的vue3起步五のapihooks封装(代码片段)

vue3.2的scriptsetup语法(代码片段)

vue3中＜scriptsetup＞和setup函数的区别(代码片段)

vue3中＜scriptsetup＞和setup函数的区别(代码片段)

vue3.2正式发布，<scriptsetup;+ts+volar=真香(代码片段)

解决：使用vue3scriptsetup时eslint报错‘defineprops‘isnotdefined

改变1：组件自动注册

改变2：属性和方法直接在`template`中使用，无需return返回