创建vue3项目、链式调用、setup函数、ref函数、reactive函数、计算和监听属性、vue3的生命周期、torefs的使用、vue3的setup写法

1 创建vue3项目

# 两种方式
	- vue-cli：vue脚手架---》创建vue项目---》构建vue项目--》工具链
    	跟之前一样
    - vite ：https://cn.vitejs.dev/
        -npm create vue@latest 
        // 或者
        -npm create vite@latest
        一路选择即可
        
        
 # 运行vue3项目
	-vue-cli跟之前一样
    -vite 创建的：npm install   npm run dev
    
    
 # vite为什么这么快
	-冷启动
    -热加载
    -按需编译
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

补充：链式调用

# 编程语言的链式调用
	对象.changeName('lin').printName().showAge()
    
# python 如何实现链式调用
	class Person:
        def changeName(self,name):
            self.name=name
            return self
        def printName(self):
            print(self.name)
            return self
            
1
2
3
4
5
6
7
8
9
10
11
12

2 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

3 ref函数

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

<script>

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

import {ref} from 'vue'

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

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

    return {name, age, handleAdd,handleChangeName}
  }
}
script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

4 reactive函数

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


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

<script>

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

import {reactive, ref} from 'vue'

export default {

  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}
    
  }

}
script>

-------------------------------------------------------------------------

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

补充：element-plus

1.官网
	https://element-plus.org/
2.安装
	npm install element-plus --save
3.使用
	import { xxx } from 'element-plus'
1
2
3
4
5
6

5 计算和监听属性

<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: 'lin',
      lastName: 'dj'
    })

    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，直接：
{{xxx}}
备注：
接收的数据可以是：基本类型(值类型)、也可以是对象(引用类型)类型。


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


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




 */
script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

6 生命周期

# vue2 生命周期---8个

# vue3 变了
	-想把生命周期写下setup函数中
    	
    -把生命周期写在配置项中
        beforeDestroy改名为 beforeUnmount
        destroyed改名为 unmounted
        
        beforeCreate
        created
        beforeMount 
        mounted
        beforeUpdate
        updated
        beforeUnmount 
        unmounted
    	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<template>
  <div class="home">
	<h1>八个生命周期钩子h1>
  div>
template>

<script>
import axios from 'axios'

import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from "vue";

export default {
  // setup()函数
  setup() {
    // 生命周期

    // 第一个beforeCreate
    console.log('我是beforeCreate, 我和setup函数融合了')
    let name = ref('lin')
    // 第二个Created
    console.log('我是Created, 我也和setup函数融合了')

    axios.get('http://localhost:8080/').then(res => {
      name.value = res.data.name
    })

    let t = setInterval(() => {
      console.log('lin')
    }, 3000)

    // 第三个onBeforeMount
    onBeforeMount(() => {
      console.log('挂载了')
    })
    // 第四个onMounted
    onMounted(() => {
      console.log('挂载完成了')
    })
    // 第五个onBeforeUpdate
    onBeforeUpdate(() => {
      console.log('更新数据')
    })
    // 第六个onUpdated
    onUpdated(() => {
      console.log('数据更新完成')
    })
    // 第七个onBeforeUnmount
    onBeforeUnmount(() => {
      console.log('在组件卸载之前执行的操作')
      clearInterval(t)
      t = null
    })
    // 第八个onUnmounted
    onUnmounted(() => {
      console.log('组件卸载完成')
    })

    return {}
  }

}
script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

7 torefs的使用

<template>
  <div class="home">
    <h1>演示toRefsh1>

{userinfo.name}}是{{userinfo.age}}岁了-->
    {{name}}是{{age}}岁了
  div>
template>

<script>


import {reactive, toRefs} from "vue";

export default {
  // setup()函数
  setup() {
    // let userinfo = reactive({
    //   name: 'lin',
    //   age: 20
    // })
    //
    // return {userinfo}

    // 或者
    let data = reactive({
      name: 'lin',
      age: 20
    })

    return {...toRefs(data)}
  }

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

console.log(dict)

script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

8 vue3 setup写法

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

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

# 自定义属性，在子组件中接收
    <script setup>
    defineProps({
      msg: {
        type: String,
        required: true
      }
    })
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<template>
  <hello-world msg="hello">hello-world>

  {{name}}
  <p><button @click="changeName">点我看是谁button>p>
template>

<script setup>
import HelloWorld from "../components/HelloWorld.vue"
import {ref} from 'vue'

let name = ref('lin')

let changeName = () => {
  name.value = '彭于晏'
}

script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18