01Vue3

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.