Vue3-拉开序幕的setup

Vue3 中的 setup 是一个新的配置项，值是一个函数。

export default {
  name: 'App',
  setup: function () {
    
  }
}
</script>

和 Vue2 中的 data 一样，我也可以将 setup 简写成为

export default {
  name: 'App',
  setup() {
    
  }
}

setup函数的使用

与 Vue2 不一样的是，setup 中包含了 data 数据，methods方法，computed计算属性，watch监听器等等一系列的属性，也就是说，在 Vue3 中，我们不会显式的把这些属性配置到 setup 中，而是直接将属性内部的数据或方法直接暴露在 setup 中

ps：本章所讲内容，不涉及响应式，也就是说在 setup 中定义的数据，不是响应式的，如何转为响应式数据，下一章节 ref 会讲到。但是 props 传递的数据是响应式的。

setup() {
    // 类似于data属性中的数据，不过不用显式的声明data，而是直接设置变量
    let name = 'al'
    let age = 18

    // 类似于methods属性中的方法
    function hello() {
      // 因为这是直接在 setup 函数中访问变量，直接访问就行，不用 this
      alert(`我的名字是${name},我的年龄是${age}`) 
    }
  }

setup 的参数

setup 函数接收两个参数，分别是 props 和 上下文 context

props 是响应式的数据，且在传入新的 props 时，会同步更新现有的 props。例如

export default {
  // 如果这里接收到的 props 改变了
  props: {
    title: String
  },

  // 那么这里的接使用的props也会同步改变
  setup(props) {
    console.log(props.title)
  }
}

同时需要注意的是，在使用props传递的数据时时，尽量采取 props.xxx的方式进行。

对于传递的 props尽量不要解构，因为解构得出的变量将会丢失响应式。如果确实需要解构，或者将 props中的某一项数据传递的同时保持响应式，可以采用 torefs 和 toref 来进行转化。

import { toRefs, toRef } from 'vue'

export default {
  setup(props) {
    // 将 `props` 转为一个其中全是 ref 的对象，然后解构
    const { title } = toRefs(props)
    // `title` 是一个追踪着 `props.title` 的 ref
    console.log(title.value)

    // 或者，将 `props` 的单个属性转为一个 ref
    const title = toRef(props, 'title')
  }
}

第二个参数则是上下文 context ，其中暴露了一些在setup 中可能会用到的值，例如：

export default {
  setup(props, context) {
    // 透传 Attributes（非响应式的对象，等价于 $attrs）
    console.log(context.attrs)

    // 插槽（非响应式的对象，等价于 $slots）
    console.log(context.slots)

    // 触发事件（函数，等价于 $emit）
    console.log(context.emit)

    // 暴露公共属性（函数）
    console.log(context.expose)
  }
}

这个 context 不是响应式的，可以直接解构，

export default {
  setup(props, { attrs, slots, emit, expose }) {
    ...
  }
}

其中 attrs 和 slots 都是有状态的对象，会随着组件自身更新而更新，但是二者都不是响应式数据，所以在使用时，同样避免解构，而是尽量通过 attrs.x 或 slots.x 方式。如果想要基于 attrs 或 slots的改变来执行副作用，那么可以在 onBeforeUpdate 声明周期中编写逻辑。

emit则是用来触发函数，和 Vue2 中作用一致。

expose 的作用则是显式的限制向外暴露的属性。当父组件引用子组件时，只能访问到通过可 expose 暴露特定的方法。当 expose 不传递参数时，代表不暴露任何东西，当传递对象时，则有选择的暴露局部状态。

import { h, ref } from 'vue'

export default {
  setup(props, { expose }) {
    const count = 0
    const increment = () => ++count.value

    expose({
      increment
    })

    return () => h('div', count.value)
  }
}

setup 的返回值

setup 存在两种返回值：

返回一个同步对象，对象中的属性、方法在模板中均可直接使用，例如

export default {
  name: 'App',
  setup() {
    // 类似于data属性中的数据，不过不用显式的声明data，而是直接设置变量
    let name = 'al'
    let age = 18

    // 类似于methods属性中的方法
    function hello() {
      alert(`我的名字是${name},我的年龄是${age}`) 
    }

    return {
      name,
      age,
      hello
    }
  }
}

<template>
  <h1>我是app组件</h1>
  <p>姓名：{{ name }}</p>
  <p>年龄：{{ age }}</p>
  <button @click="hello()">个人信息</button>
</template>

返回一个渲染函数，可以自定义渲染内容（

<script>
import { h } from 'vue'
export default {
  name: 'App',
  setup() {
    // 类似于data属性中的数据，不过不用显式的声明data，而是直接设置变量
    let name = 'al'
    let age = 18


    // Vue2 中的 main.js 中，在使用 render 函数时，就使用了 h 这个方法，
    // 第一个参数是节点，第二个参数是渲染内容
    // 当使用 返回 render 函数之后，html 模板中的内容都会被忽略，只会执行 h 函数的渲染内容
    return () => h('div','我改名字了')
  }
}
</script>

ps：返回一个渲染函数将会阻止我们返回其他东西。对于组件内部来说，这样没有问题，但如果我们想通过模板引用将这个组件的方法暴露给父组件，那就有问题了。因为此时除了渲染函数之外，暴露不了别的数据和方法了，为了解决这一问题，Vue3采用了 expose 来暴露方法或属性，然后返回渲染函数

setup(props,{ expose }) {
  // 类似于data属性中的数据，不过不用显式的声明data，而是直接设置变量
  let name = 'al'
  let age = 18

  // 类似于methods属性中的方法
  function hello() {
    alert(`我的名字是${name},我的年龄是${age}`) 
  }

  // 通过 expose 暴露方法或属性
  expose({
    name,
    hello
  })

  // Vue2 中的 main.js 中，在使用 render 函数时，就使用了 h 这个方法，
  // 第一个参数是节点，第二个参数是渲染内容
  // 当使用 返回 render 函数之后，html 模板中的内容都会被忽略，只会执行 h 函数的渲染内容
  return () => h('div','我改名字了')
}
}

注意事项

1、Vue2 和 Vue3 不要混用。Vue3 是向下兼容的，所以即使是在 Vue3 项目中，也可以使用 Vue2 的语法，但是也会带来一些问题。

兼容性：在 Vue3 项目中也可以使用 Vue2 的写法

<template>
  <p>在Vue3中访问 Vue2 写法下的属性或方法</p>
  <p>姓名：{{ newName }}</p>
  <p>年龄：{{ newAge }}</p>
  <button @click="getVue3Data">点击获取Vue2写法中的数据</button>
</template>


<script>
export default {
  name: 'App',
  data() {
    return {
      newName: '汤圆',
      newAge:1
    }
  },
  methods: { 
    testVue2(){
      alert(`我的名字是${this.newName},我的年龄是${this.newAge}`)
    }
  },
}
</script>

2、Vue2 的配置项( data、methods、computed... )中可以访问 Vue3 中 setup 中的属性、方法

<button @click="testVue3">点击后再Vue2写法中获取Vue3写法中setup的数据</button>

<script>
export default {
  name: 'App',
  methods: { 
    testVue3() {
      console.log(this.name);
      console.log(this.age);
      console.log(this.hello);
    }
  },
  setup() {
      // 类似于data属性中的数据，不过不用显式的声明data，而是直接设置变量
      let name = 'al'
      let age = 18

      // 类似于methods属性中的方法
      function hello() {
        alert(`我的名字是${name},我的年龄是${age}`) 
      }

      return {
        name,
        age,
        hello
      }
    }
}
</script>

点击按钮之后，控制台上打印出了 Vue3 setup 中定义的变量和方法。

3、但是在 Vue3 中的setup 中调用 Vue2 声明的变量或方法时，会无法找到

setup() {
  // 类似于data属性中的数据，不过不用显式的声明data，而是直接设置变量
  let name = 'al'
  let age = 18

  // 类似于methods属性中的方法
  function hello() {
    alert(`我的名字是${name},我的年龄是${age}`) 
  }

  function testVue4() {
    console.log(name);
    console.log(age);
    console.log(hello);

    // 因为这些属性或方法不是在 setup 内部定义的，而是按照Vue2 的配置语法定义的，所以按照Vue2的访问模式 通过 this.xxx 访问
    console.log(this.newName);
    console.log(this.newAge);
    console.log(this.testVue2);
  }
  return {
    name,
    age,
    hello,
    testVue4
  }
}

从这里可以看到，在 Vue3 的 setup 中访问 Vue2 中的方法或属性时，得到的是undefined，这是因为 setup() 自身并不含对组件实例的访问权，即在 setup() 中访问 this 会是 undefined。你可以在选项式 API 中访问组合式 API 暴露的值(在 Vue2 中访问 Vue3的属性或方法)，但反过来则不行。

但是但是这里其实还存在一个问题，如果我直接在 setup 中访问 this，得到的是undefined，但是如果我是在 setup 中定义的函数中访问 this，得到的是一个 Proxy 代理对象

setup() {
  console.log(this, 'this111');

  function testVue4() {
    console.log(this,'this');
    console.log(this.newName);
    console.log(this.newAge);
    console.log(this.testVue2);
  }
  return {
    testVue4
  }
}

首先说直接在 setup 中访问 this，问什么会是undefined？这是因为setup函数执行时，不依赖于Vue实例，换句话说就是 setup 函数在Vue实例化之前就执行了，所以无法直接访问到this。

然后再说为什么setup 中的方法作为组件模板内容使用时(例如作为事件处理函数被调用时)，那么Vue会将这个方法绑定到Vue实例上。当该函数被调用时，this指向的就是Vue组件实例。

也就是说 Vue3中无法在 setup 内部直接访问到 this，但是通过 return 出去的函数或者绑定到模板的数据时可以访问到this。

4、如果 Vue2 和 Vue3 混用时，数据或方法出现重名情况，以 setup 中的数据优先

<template>
  <p>{{ name }}</p>
  <button @click="hello">点击查看</button>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      name: "aha",
    };
  },
  methods: {
    hello() {
      alert(`我的名字是${this.name}`);
    },
  },
  setup() {
    let name = "al";

    // 类似于methods属性中的方法
    function hello() {
      alert(`我的名字是${name}`) 
    }

    return {
      // eslint-disable-next-line vue/no-dupe-keys
      hello,
      // eslint-disable-next-line vue/no-dupe-keys
      name,
    };
  },
};
</script>

5、setup() 应该同步地返回一个对象。唯一可以使用 async setup() 的情况是，该组件是 Suspense 组件的后裔。

具体理解就是 setup 在一般情况下，不能使用 async 包裹，因为被 async 包裹之后，即使你返回的还是原来的对象，但是 async 会对象外部包裹一层 Promise，如果想要拿取数据的话，还需要通过.then() 来获取，模板中时无法直接看到并且使用 return 对象中的属性或方法的。而 Vue 是不会自动帮你做这件事的。

但是也存在一直特殊情况，那就是该组件是 Suspense 组件的后裔( 这个后在讲，我现在也没研究到这里来 )。

总结

1、Vue2 和 Vue3 的配置尽量不要混用

2、如果混用了，

Vue2 中的配置 (例如：data、methods、compute、watch等)可以访问到 setup 中的属性和方法
Vue3 中的setup 不能访问到 Vue2 中的配置项
存在重名情况，以 Vue3 setup 中优先

3、setup 一般不用 async，因为 setup 需要同步的返回一个对象，以此来保证模板中数据或方法正常绑定，如果用了 async 那么返回的数据对象会被 Promise 包裹，模板中无法看到对象中的属性，无法绑定。但是当该组件是 Suspense 组件的后裔时，可以使用 async setup()