开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

前言

上一篇文章我们了解了如何创建工程，这一篇文章我们了解下用vue-cli创建的工程的结构。

一、入口文件main.js

引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
const app = createApp(App) 创建应用实例对象——app（类似于之前Vue2中的vm,但app比vm更“轻”）
app.mount('#app') 挂载
app.unmount('#app') 卸载

2、app.vue

Vue3组件中的模板结构可以没有根标签

二、setup

代码中不需要写data、methods了，组件中所用到的数据、方法等都要配置在setup中。

比如数据就直接定义变量： let name = "张三";
方法中调用${name}而不需要加this

setup函数的两种返回值

若返回一个对象，则对象中的属性、方法在模板中均可以直接使用。
若返回一个渲染函数，则可以自定义渲染内容。如return () => h('h1', '测试')，无论页面的template里面有什么，最终都只显示测试。

<template>
  <h1>姓名：{{name}}</h1>
  <h1>年龄：{{age}}</h1>
  <button @click="sayHello">说话</button>
</template>
<script>
import { h } from 'vue'
export default {
  name: 'App',
  setup() {
    // 数据
    let name = '张三'
    let age = 18
    // 方法
    function sayHello() {
      alert(`我叫${name}，今年${age}`)
    }
    // 返回一个对象，常用
    return {
      name,
      age,
      sayHello
    }
    // 返回一个渲染函数
    // return () => h('h1', '测试')
  }
}
</script>

setup的注意项

setup在beforeCreate之前执行一次，this是undefined
setup两个参数

export default {
      name: 'Demo',
      props:['msg','school'],//在props中定义了外部传进来的参数会放在setup的props中
      emits:['hello'],
      setup(props,context){
          console.log('---setup---',props)
          console.log('---setup---',context)//没有在props中定义的外部传进来的参数，会放在context.attrs中
          return {
          }
}

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

// 此 props 对象是响应式的——即在传入新的 props 时会对其进行更新，并且可以通过使用 watchEffect 或  watch 进行观测和响应：
export default {
props: {
  name: String
},
setup(props) {
    watchEffect(() => {
       console.log(`name is: ` + props.name)
    })
  }
}
// 注：不要解构props对象，因为它会失去响应式

setup的参数context:提供了一个上下文对象，该对象暴露了以前在this上暴露的property的选择列表
- attrs：值为对象，包含组件外部传递过来但没有在props配置中声明的属性，相当于this.$attrs
- slots: 收到的插槽内容, 相当于 this.$slots
- emit: 分发自定义事件的函数, 相当于 this.$emit

具名插槽
- 在Vue3中，具名插槽的名字实用的是v-slot插件
- 语法：v-slot:名字

结束语

本章结束啦，下面一章一起学习一下Vue3的响应式。

Vue3开发（三）之入口文件与setup学习

前言

一、入口文件main.js

2、app.vue

二、setup

结束语