Vue3学习-分析工程结构、初识setup

Vue3高级全套教程合集：点击跳转    Vue2基础全套教程合集：点击跳转   Vue2高级全套教程合集：点击跳转

---

一、分析工程结构

Vue3.0与Vue2.0的项目结构一致，

├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

二、初识setup

1. 理解：Vue3.0中一个新的配置项，值为一个函数。

2. setup是所有Composition API（组合API）“ 表演的舞台 ”。

3. 组件中所用到的：数据、方法等等，均要配置在setup中。

4. setup函数的两种返回值：

   1. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）

   2. 若返回一个渲染函数：则可以自定义渲染内容。（了解）

5. 注意点：

   1. 尽量不要与Vue2.x配置混用

      • Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性、方法。

      • 但在setup中不能访问到Vue2.x配置（data、methos、computed…）。

      • 如果有重名, setup优先。

   2. setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

      具体编码： 不考虑响应式，测试setup的功能。

      <template>
      	<h1>一个人的信息</h1>
      	<h2>姓名：{{name}}</h2>
      	<h2>年龄：{{age}}</h2>
      	<h2>性别：{{sex}}</h2>
      	<h2>a的值是：{{a}}</h2>
      	<button @click="sayHello">说话(Vue3所配置的——sayHello)</button>
      	<br>
      	<br>
      	<button @click="test2">测试一下在Vue3的setup配置中去读取Vue2中的数据、方法</button>
      
      </template>
      
      <script>
      	// import {h} from 'vue'
      	export default {
      		name: 'App',
      		//此处只是测试一下setup，暂时不考虑响应式的问题。
      		setup(){
      			//数据 - 此时这样定义的数据是没有响应式的。
      			let name = '张三'
      			let age = 18
      			let a = 200
      
      			//方法
      			function sayHello(){
      				alert(`我叫${name}，我${age}岁了，你好啊！`)
      			}
      			function test2(){
      				console.log(name)
      				console.log(age)
      				console.log(sayHello)
      				console.log(this.sex)
      				console.log(this.sayWelcome)
      			}
      
      			//返回一个对象（常用）
      			return {
      				name,
      				age,
      				sayHello,
      				test2,
      				a
      			}
      
      			//返回一个函数（渲染函数）
      			// return ()=> h('h1','尚硅谷')
      		}
      	}
      </script>
      

setup的两个注意点

1. setup执行的时机

   • 在beforeCreate之前执行，并且setup中的this是undefined。

     具体编码：

     <script>
     	export default {
     		name: 'Demo',
     		props:['msg','school'],
     		emits:['hello'],
     		beforeCreate() {
     			console.log("---beforeCreate---");
     		},
     		setup(props,context){
     			console.log("---setup---","this指向为：",this);
     		}
     	}
     </script>
     

     运行结果：

     

2. setup的参数

   • props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。

   • context：上下文对象

     • attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。

     • slots: 收到的插槽内容, 相当于 this.$slots。

     • emit: 分发自定义事件的函数, 相当于 this.$emit。

     具体编码： 此时无需在意该处的reactive，看不懂没事，重点注意，setup身上可以接收两个参数 props 和 context

     <template>
     	<h1>一个人的信息</h1>
     	<h2>姓名：{{person.name}}</h2>
     	<h2>年龄：{{person.age}}</h2>
     	<button @click="test">测试触发一下Demo组件的Hello事件</button>
     </template>
     
     <script>
     	import {reactive} from 'vue'
     	export default {
     		name: 'Demo',
     		props:['msg','school'],
     		emits:['hello'],
     		setup(props,context){
     			console.log('---setup---',context) 
     			//数据
     			let person = reactive({
     				name:'张三',
     				age:18
     			})
     
     			//方法
     			function test(){
     				context.emit('hello',666)
     			}
     
     			//返回一个对象（常用）
     			return {
     				person,
     				test
     			}
     		}
     	}
     </script>
     

源代码出处：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通