vue3.0 setup 用法 (详解)

vue3新语法糖——setup

• setup函数是 Composition API（组合API）的入口
• 在setup函数中定义的变量和方法最后都是需要 return 出去的不然无法在模板中使用

setup函数的注意点：

1、由于在执行 setup函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用 data 和 methods 的变量和方法

2、由于我们不能在 setup函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined

3、setup函数只能是同步的不能是异步的

一.setup 参数

官网说明：
使用 setup 函数时，它将接收两个参数：

props
context

1.props参数

setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

但是，因为 props 是响应式的，你不能使用 ES6 解构，它会消除 prop 的响应性。
如果需要解构 prop，可以在 setup 函数中使用 toRefs 函数来完成此操作：

import { toRefs } from 'vue'

setup(props) {
  const { title } = toRefs(props)

  console.log(title.value)
}

如果 title 是可选的 prop，则传入的 props 中可能没有 title 。在这种情况下，toRefs 将不会为 title 创建一个 ref 。你需要使用 toRef 替代它：

import { toRef } from 'vue'
setup(props) {
  const title = toRef(props, 'title')
  console.log(title.value)
}

2.context参数

传递给 setup 函数的第二个参数是 context。context 是一个普通 JavaScript 对象，暴露了其它可能在 setup 中有用的值：

export default {
  setup(props, context) {
    // Attribute (非响应式对象，等同于 $attrs)
    console.log(context.attrs)
    
    // 插槽 (非响应式对象，等同于 $slots)
    console.log(context.slots)

    // 触发事件 (方法，等同于 $emit)
    console.log(context.emit)

    // 暴露公共 property (函数)
    console.log(context.expose)
  }
}

context 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 context 使用 ES6 解构。

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

二.ref,reactive----data, methods

例：

<template>
 
 <div id="setup">
 
  {{name}}
  <p>{{age}}</p>
  <button @click="add()">+</button>
  <br>
  
 <p>{{admin}}</p>
  {{pass}}
 
 </div>
 
</template>
<script>
 
import {ref,reactive,toRefs} from 'vue'
 
export default {
 
 name:'setup',
 setup(){
 
  const name =ref('小四')
 
  const age=ref(7)
 
  function add(){
 
   age.value++ //想改变值或获取值 必须.value
 
  }
   const testmr = reactive({
     admin: '小小鸭',
     pass: 20
   });
 
  return { //必须返回 模板中才能使用
 
   name,age,add,...toRefs( testmr )
 
  }
 }
}
 
</script>

三.watch

watch 第一个参数可以传递参数，也可以传递函数
例：第一个参数为传递参数

//点击按钮  输出state，改变
<template>
  <button @click="bianhua">数字: {{ state.count }}</button>
</template>

<script>
import { reactive, watch } from 'vue'
export default {
  setup () {
    let state = reactive({count: 0})
    let bianhua= () => state.count++;

    watch(state, () => {
      console.log(state, '改变')
    })
    return { state, bianhua}
  }
}
</script>

例：第一个参数为函数

//点击按钮 输出旧的 新的数字 ，改变
<template>
  <button @click="change">count is: {{ state.count }}</button>
</template>

<script>
import { reactive, watch } from 'vue'
export default {
  setup () {
    let state = reactive({count: 0})
    let change = () => state.count++;
    watch(() => state.count, (oldVlaue, newValue) => {
      console.log(oldVlaue, newValue, '改变')
    })
    return { state, change }
  }
}
</script>