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.