创建vue3项目

# 两种方式
    - vue-cli：vue脚手架---》创建vue项目---》构建vue项目--》工具链
        跟之前一样
    - vite ：https://cn.vitejs.dev/
        -npm create vue@latest
        一路选择即可
        
        
 # 运行vue3项目
    -vue-cli跟之前一样
    -vite 创建的：npm install   npm run dev
    
    
 # vite为什么这么快
    -冷启动
    -热加载
    -按需编译

补充

# 编程语言的链式调用
    对象.changeName('lqz').printName().showAge()
    
# python 如何实现链式调用
    class Person:
        def changeName(self,name):
            self.name=name
            return self
        def printName(self):
            print(self.name)
            return self

setup函数

# 使用 vue-cli创建的项目讲

setup的两个注意点
# setup执行的时机

在beforeCreate之前执行一次，this是undefined。

# setup的参数
props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
context：上下文对象
attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
slots: 收到的插槽内容, 相当于 this.$slots。
emit: 分发自定义事件的函数, 相当于 this.$emit。

    
    
    
# 总结：
    setup执行是在beforeCreate，没有this对象，以后不要用this了
    
    如果写setup函数，想接收父组件自定义属性传入的值，需要
        export default {
          setup(props) {
            console.log(props.msg)
          },
          props: ['msg']
        }
        
    如果是vue3的最新写法，想接收父组件自定义属性传入的值，需要
    <script setup>
    defineProps(['msg'])
    </script>

<template>
  <div class="home">
    <p>我的名字是：{{ name }}</p>
    <p>我的年龄是：{{ age }}</p>
    <button @click="handleClick">点我看信息</button>
  </div>
</template>

<script>


export default {
  setup() {
    // 1 定义数据
    const name = 'lqz'
    let age = 19
    // 2 定义方法
    const showInfo = () => {
      alert(`姓名是：${name},年龄是：${age}`)
    }


    return {name, age, showInfo}


  },
  methods: {
    handleClick() {
      alert(`姓名是：${this.name},年龄是：${this.age}`)
    }
  }
}
</script>

ref函数

<template>
  <div class="home">
    <p>我的名字是：{{ name }}</p>
    <p>我的年龄是：{{ age }}</p>
    <button @click="handleAdd">点我年龄+1</button>
    <button @click="handleChangeName">点我秒变彭于晏</button>
  </div>
</template>

<script>

// 变量要具备响应式---》页面内容变化，变量和变，变量变化，页面也变
// 普通变量，通过ref绑定响应式
// 引用类型变量：通过reactive 绑定响应式
import {ref} from 'vue'

export default {

  setup() {
    // 1 定义数据
    let name = ref('lqz')
    let age = ref(19)
    // 2 定义方法
    const handleAdd = () => {
      age.value += 1
      console.log(typeof age)
    }

    const handleChangeName = () => {
      name.value = '彭于晏'
    }

    return {name, age, handleAdd,handleChangeName}


  },
}
</script>

reactive函数

<template>
  <div class="home">
    <p>我的名字是：{{ data.name }}</p>
    <p>我的年龄是：{{ data.age }}</p>
    <p>我的爱好是：{{ hobby }}</p>
    <button @click="addAge">点我年龄+1</button>
    <br>
    {{ obj.hobby }}
    <br>
    <button @click="changeHobby">点我把保龄球换成足球</button>


    <hr>
    <HelloWorld msg="asdfasdfasdfasdf"></HelloWorld>
  </div>
</template>

<script>

// 变量要具备响应式---》页面内容变化，变量和变，变量变化，页面也变
// 普通变量值类型，通过ref绑定响应式   数字，字符串
// 引用类型变量：通过reactive 绑定响应式   对象，数组

import {reactive, ref} from 'vue'
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: 'HomeView',
  setup(props) {

    let hobby = ref('篮球')
    let obj = ref({
      age: 99,
      hobby: '保龄球'
    })

    const changeHobby = () => {
      console.log(obj)
      obj.value.hobby = '足球'
    }


    let data = reactive({
      name: '彭于晏',
      age: 19
    })
    const addAge = () => {
      //data.age++
      console.log(typeof data)
      console.log(data) // 是一个代理对象,无法拿出原来对象，但是操作起来跟操作源对象一样
      data.age++
    }
    return {hobby, data, addAge, obj, changeHobby}


  },
  components: {
    HelloWorld
  }

}


/*
ref
作用: 定义一个响应式的数据
语法: const xxx = ref(initValue)
创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
JS中操作数据： xxx.value
模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
备注：
接收的数据可以是：基本类型(值类型)、也可以是对象(引用类型)类型。


reactive
作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
reactive定义的响应式数据是“深层次的”,无论套多少层，都具备响应式


# 总结：
  如果用基本数据类型：数字，字符串，布尔，用ref做响应式
  如果是对象类型，用ref和reactive都可以，但是建议使用reactive
  如果使用ref包裹对象类型，多了一层value




 */
</script>

计算监听属性

<template>
  <div class="home">
    <input type="text" v-model="name.firstName">
    <input type="text" v-model="name.lastName">
    <br>
    <input type="text" v-model="fullName">


    <button @click="age++">点我年龄加</button>
  </div>
</template>

<script>


import {computed, watch, reactive, ref,watchEffect} from 'vue'

export default {
  name: 'HomeView',
  setup() {
    // 计算属性：computed

    let name = reactive({
      firstName: 'liu',
      lastName: 'qz'
    })

    let fullName = computed({
      get() {
        return name.firstName + '-' + name.lastName
      },
      set(value) {
        const nameArr = value.split('-')
        name.firstName = nameArr[0]
        name.lastName = nameArr[1]

      }
    })

    let age = ref(19)

    // 监听属性

    // 监听基本类型
    watch(age, (newValue, oldValue) => {
      console.log(oldValue)
      console.log(newValue)
    })
    // 监听对象
    watch(() => name.firstName, (newValue, oldValue) => {
      console.log(oldValue)
      console.log(newValue)
    })


    // watchEffect函数
    watchEffect(() => {
      const x1 = age.value
      const x2 = name.firstName
      console.log('watchEffect配置的回调执行了')
    })

    return {name, fullName, age}


  }


}


/*
ref
作用: 定义一个响应式的数据
语法: const xxx = ref(initValue)
创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
JS中操作数据： xxx.value
模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
备注：
接收的数据可以是：基本类型(值类型)、也可以是对象(引用类型)类型。


reactive
作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
reactive定义的响应式数据是“深层次的”,无论套多少层，都具备响应式


# 总结：
  如果用基本数据类型：数字，字符串，布尔，用ref做响应式
  如果是对象类型，用ref和reactive都可以，但是建议使用reactive
  如果使用ref包裹对象类型，多了一层value




 */
</script>

生命周期

# vue2 生命周期---8个

# vue3 变了
    -想把生命周期写下setup函数中
        
    -把生命周期写在配置项中
        beforeDestroy改名为 beforeUnmount
        destroyed改名为 unmounted
        
        beforeCreate
        created
        beforeMount 
        mounted
        beforeUpdate
        updated
        beforeUnmount 
        unmounted

<template>
  <div class="home">
    <h1>首页</h1>
  </div>
</template>

<script>

import axios from "axios";
import {
  computed,
  watch,
  reactive,
  ref,
  watchEffect,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'

export default {
  name: 'HomeView',
  setup() {

    // 第一个beforeCrete
    console.log('我是beforeCrete')

    // 第二个Creted
    let name = ref('lqz')
    console.log('Creted')
    // axios.get().then(res => {
    //   name.value = res.data.name
    // })

    // 直接启动定时器
    let t = setInterval(() => {
          console.log('lqz')
        }, 3000
    )
    // 第三个：onBeforeMount
    onBeforeMount(() => {
      console.log('挂载了')
    })

    onBeforeUnmount(() => {
      clearInterval(t)
      t = null

    })


    return {}


  },


}


</script>

torefs

<template>
  <div class="home">
    <h1>首页</h1>
    {{ name }}---{{ age }}
  </div>
</template>

<script>

import axios from "axios";
import {
  reactive,
  toRefs

} from 'vue'

export default {
  name: 'HomeView',
  setup() {
    let data = reactive({
      name: 'lqz',
      age: 19
    })

    return {...toRefs(data)}
  },


}

// 对象的解压
let data ={'name':'lqz',age:19}
let dict={...data,hobby:'篮球'}

console.log(dict)



</script>

vue3 setup写法

// 以后vue3推荐，把setup函数的代码，直接写在script中
<script setup>
//定义变量
//写函数
//不用return，在html中直接使用
</script>

// 使用组件，直接导入，不需要配置，直接用即可
import HelloWorld from "../components/HelloWorld.vue";
在html中直接用：<HelloWorld msg="NB"></HelloWorld>

// 自定义属性，在子组件中接收
    <script setup>
    defineProps({
      msg: {
        type: String,
        required: true
      }
    })
    </script>