vue3 setup（基础版）

​ setup 选项是一个接收 props 和 context 的函数，此外，将 setup 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。基本写法如下：

export default{
    name: 'test',
    setup(props,context){

     return {}   // 这里返回的任何内容都可以用于组件的其余部分
    }
    // 组件的"其余部分"
}
1
2
3
4
5
6
7
8

定义响应式数据

ref 我们用来将 基本数据类型 定义为响应式数据（ref更适合定义基本数据类型），ref底层的本质其实还是reactive，系统会自动根据我们给ref传入的值将它转换成ref(xx) -> reactive({value:xx})

reactive用来将引用类型定义为响应式数据，其本质是基于Proxy实现对象代理

• 基本数据类型（单类型）：除Object。 String、Number、boolean、null、undefined。
• 引用类型：object。里面包含的 function、Array、Date。

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

**使用: **

1
2
3
4
5
6
7
8
9
10
11
12
13

Refs

toRefs会将我们一个响应式的对象转变为一个普通对象，然后将这个普通对象里的每一个属性变为一个响应式的数据

setup(){
  const obj = reactive({
    name:'inline',
    gender:'男',
    age:'18',
  })

  return{
    ...toRefs(obj),
  }
}
1
2
3
4
5
6
7
8
9
10
11

  
姓名:{{ name }}
  
性别:{{ gender }}
  
年龄:{{ age }}



  改变姓名
  改变性别
  改变年龄

1
2
3
4
5
6
7
8
9
10
11

setup中执行方法

方法一：

以reactive定义响应式数据的方式来定义方法

<script>
import {ref, reactive,toRefs} from "vue";

export default {
  name: "test",
  setup(){
    const str = ref('inline')
    const fun = reactive({
      fun1(data){
        console.log(str.value)
        this.fun2(data)
      },
      fun2(data){
        console.log(data)
        console.log('我是fun2')
      }
    })

    return{
      ...toRefs(fun),
    }
  }
}
</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

​ 使用this.fun2()的方式去调用fun2，为什么这里用this可以正常执行不会报undefind，因为这里的this非彼this，Vue2里的this是实例这里的this是对象

点我1
1

方法二：

export default {
  name: "test",
  setup(){
      const fun1 = (data) => {
        fun2(data)
      }
      const fun2 = (data) => {
        console.log(data)
      }
    return{
      fun1,
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

点我1
1

方法三：

这里避免了将功能逻辑都堆叠在setup的问题，将独立的功能写成单独的函数

这里我在setup外写了fun() login()两个功能函数，并在setup内分别调用

import {ref, reactive,toRefs} from "vue";

export default {
  name: "test",
  setup(){
    const test1 = fun()      // 如果函数返回参数过多，可以赋值给变量并用扩展运算符暴露给组件的其余部分
    const { test } = login() // 也可单个接收
    return{
      ...toRefs(test1),
      test,
    }
  }
}

// 功能1
function fun(){
  let str = ref('我是功能1')
  function fun1(data){
    console.log(str.value)
    fun2(data)
  }
  function fun2(data){
    console.log(data)
  }
  return{
    fun1,
    fun2,
  }
}

// 功能2
function login() {
  const obj = reactive({
    msg:'我是功能2'
  })
  function test() {
    console.log(obj.msg)
  }
  return{
    test
  }
}
</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

点我1
点我2
1
2

方法四：

与方式三一样，只是我们将两个功能函数提取出来放在单独的.js文件中

test.js

import {ref, reactive} from "vue";
// 功能一
function fun(){
	let str = ref(value: "我是功能一")
	function fun1(data){
		console.log(str.value)
		fun2(data)
	}
	function fun2(data){
		console.log(data)
	}
	return{fun1, fun2}
}

// 功能二
function login(){
	const obj = reactive(target: {
    	msg:'我是功能2'
    })
    function test() {
    	console.log(obj.msg)
    }
    return{ test }
}

export {
	fun,
	login
}
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

引入组件，并调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

方法五：

定义一个reactive响应式对象，赋值给login变量，这个响应式对象内有我们登录需要的参数、验证和方法，这里我们全部放在login这个响应式对象内然后用toRefs及扩展运算符暴露出去

<script>
import {ref, reactive,toRefs} from "vue";

export default {
  name: "test",
  setup(){
    const login = reactive({
      param: {
        username: '123',
        password: '123456',
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
      login(){
        this.param.username = 'inline'
        this.param.password = '123456'
        console.log('成功登录！')
      }
    })

    return{
      ...toRefs(login),
    }
  }
}
</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

登录
1
2
3

setup注意点

• 由于在执行 setup函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用 data 和 methods 的变量和方法
• 由于我们不能在 setup函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup函数中的this 修改成了 undefined