vue3和vue2常见的使用差异 setup函数

vue3和vue2常见的使用差异

学习路径

单文件组件的渲染
setup
单文件组件的template
子传父的实现

单文件组件的渲染

1.通过解构的方式获取createApp
2.通过createApp创建应用

import { createApp } from 'vue'
import App from './App.vue'
// import './index.css'

createApp(App).mount('#app')

单文件组件的template

vue 规定：每个组件对应的模板结构，需要定义到 节点中
在 vue 3.x 的版本中，<template> 节点内的 DOM 结构支持多个根节点。

<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>

注意：<template> 是 vue 提供的容器标签，只起到包裹性质的作用，<template> 它不会被渲染为真正的 DOM 元素

setup函数

1.setup的基本特性

1. setup()函数是 vue3 中，专门为组件提供的新属性。它为我们使用 vue3 的 新特性提供了统一的入口
2. setup函数是处于 生命周期函数beforeCreate和 Created两个钩子函数之前的函数
3. setup函数中是无法 使用 data 和 methods 中的数据和方法的
4. 在setup函数中定义的属性和方法最后都是需要 return 出去的，这样我们就可以在模板中直接访问该对象中的属性和方法

2.在setup中定义响应式数据并返回

1. 解构的方式引入reactive import {reactive} from 'vue'
2. 创建响应式数据 let state= reactive({数据})
3. 返回return {state}
4. 在模板中使用

3.在setup中定义函数并使用

1. 在setup中定义函数
2. 同样需要返回
3. 在模板中调用函数：<button @click="login">提交</button>

代码演示

<template>
  <div>
    <p>{{ state.msg }}</p>
    <button @click="getMsg">点击</button>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "App",
  setup() {
    let state = reactive({
      msg: "hello lsh",
    });
    function getMsg() {
      state.msg = "lsh dsb";
      console.log(state.msg);
    }
    //需要返回定义好的响应式数据
    return {
      state,
      getMsg,
    };
  },
};
</script>

4.在setup函数的参数

对于 setup 函数来说，它接收两个参数，分别为：

1. props：通过 prop 传递过来的所有数据，我们都可以在这里进行接收。并且获取到的数据将保持响应性
2. context：context 是一个 JavaScript 对象，这个对象暴露了三个组件的属性，我们可以通过 ‘解构 ’的方式来分别获取这三个属性
   1. attrs： 它是绑定到组件中的 非 props 数据，并且是非响应式的。
   2. slots： 是组件的插槽，同样也不是 响应式的。
   3. emit：是一个方法，相当于 vue2 中的 this.$emit 方法

5. 子传父的实现

1. 子组件发出事件
2. 父组件进行监听
3. 通过ref方法关联节点
4. 为指定的节点赋值