Vite3构建Vue3项目
1、输入命令npm init vite，使用包管理器初始化一个vite项目；
2、输入项目名称；
3、选择框架，vue
4、选择开发语言，JavaScript
5、cd 到项目目录
6、npm install
7、npm run dev
简单的Vue页面
<script setup>
</script>
<template>
<div class="div">
hello 666
</div>
</template>
<!--scoped:下面的样式只有当前组件生效-->
<!--如果不加scoped，则下面的样式对当前组件内引入的其他组件也生效-->
<style scoped>
.div {
color: red
}
</style>Vue3.0setup函数
setup函数是vue3中专门为组件提供的新属性。
创建组件实例，然后初始化props，紧接着就调用setup函数，会在beforeCreate钩子之前被调用
vue3.0中Vue页面的setup函数不是写在<script setup>上的。
<script>
import { defineComponent, reactive } from 'vue';
export default defineComponent({
//setup是一个入口函数
setup() {
//响应式数据
const state = reactive({
count: 100,
id: 1,
name: 'jack',
arr: [{ title: 1, id: 1 }, { title: 2, id: 2 }]
})
const change = () => {
console.log(1111);
state.arr.push({ title: 3, id: state.arr.length + 1 });
}
//将响应式数据开放出来，供template模版使用
return {
...state,//state解构完之后，数值类型丧失响应特性，引用类型仍然有响应特性
change
};
},
})
</script>
<template>
<div class="div">
<ul>
<li v-for="(v, i) in arr" :key="v.id">
{
{ v.title }}
</li>
</ul>
hello{
{ count }} 666
<button @click="change">点击</button>
</div>
</template>
<!--scoped:下面的样式只有当前组件生效-->
<!--如果不加scoped，则下面的样式对当前组件内引入的其他组件也生效-->
<style scoped>
.div {
color: red
}
</style>注意：在setup()函数中无法访问到this
vue3.2setup函数
<script setup>
import { ref, reactive } from 'vue'
//定义响应式数据,ref底层也是通过reactive实现的。let count = reactive({value:100})。
//模版中使用为了简化，可以直接使用count获取value的值。
//但是在js中，还是要通过count.value进行逻辑操作
let count = ref(100);//定义响应式数据
let arr = reactive([{ title: 1, id: 1 }, { title: 2, id: 2 }]);//定义响应式数据
let obj = reactive({id:99})
const change = () => {
arr.push({ title: 3, id: arr.length + 1 })
count.value += 1;
}
</script>
<template>
<div class="div">
<ul>
<li v-for="(v, i) in arr" :key="v.id">
{
{ v.title }}
</li>
</ul>
hello{
{ count }} 666--{
{ obj.id }}
<button @click="change">点击</button>
</div>
</template>Vue3全家桶
reactive函数
reactive()函数接收一个普通对象，返回一个响应式的数据对象。底层是ES6的Proxy实现的
const o1 = reactive({id:1});
const o2 = {id:2};
//o2本来没有双向绑定，正常不能实时显式到页面上
//但是o1是一个双向绑定对象，o1.id的变化，会触发页面的刷新，从而也会导致o2.id被刷新到页面上
function change(){
o1.