「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」
使用 vite 创建
- vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，
- 它做到了本地快速开发启动, 在生产环境下基于 Rollup 打包。
- 快速的冷启动，不需要等待打包操作；
- 即时的热模块更新，替换性能和模块数量的解耦让更新飞起；
- 真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
API函数
setup
- 只在初始化时执行一次
- 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用
ref
-
作用: 定义一个数据的响应式
-
语法: const xxx = ref(initValue):
- 创建一个包含响应式数据的引用(reference)对象
- js中操作数据: xxx.value
- 模板中操作数据: 不需要.value
-
一般用来定义一个基本类型的响应式数据
<template> <h2>{{count}}</h2> <hr> <button @click="update">更新</button> </template> <script> import { ref } from 'vue' export default { /* 使用vue3的composition API */ setup () { // 定义响应式数据 ref对象 const count = ref(1) console.log(count) // 更新响应式数据的函数 function update () { // alert('update') count.value = count.value + 1 } return { count, update } } } </script>
vue3兼容vue2, 因此在Vue3中依然可以使用data和methods方法, 但建议不要混合使用，新开发使用Vue3的方法。
-
在beforeCreate之前执行(一次), 此时组件对象还没有创建
-
this是undefined, 不能使用this
const { proxy } = getCurrentInstance(); 可以获取到当前对象
setup的参数
setup(props, context) / setup(props, {attrs, slots, emit})
-
props: 包含props配置声明且传入了的所有属性的对象
-
attrs: 包含没有在props配置中声明的属性的对象, 相当于 this.$attrs
-
slots: 包含所有传入的插槽内容的对象, 相当于 this.$slots
-
emit: 用来分发自定义事件的函数, 相当于 this.$emit
props 可以用来接收传参
父组件中
<child :msg="msg" msg2="cba" @fn="fn"/>
子组件
<script lang="ts">
setup(props){
// 接收参数
console.log(props.msg)
}
</script>
setup 简写 将return 所有对象
<script setup name="xxx" lang="ts">
</script>
setup ref 是vue3的常用主要函数。
相较react，vue2的最大特点是双向绑定。react通过钩子函数useState实现数据更新，useEffect实现数据加载及监视，vue3引入了ref，setup，其数据绑定界面渲染的思想有相似之处。
