Установку Vue3 все еще можно использовать так?

Введение

что ты сказал вчера组合式API,# Уже почти 2202 год, а вы до сих пор не знаете, что такое API композиции Vue3?Приходи и послушай, как я выдуваю vue3 сегодняsetupкак пользоваться

Заимствование предложения с официального сайта

setupвариант полученияprops и context Функция

То есть его основное написание должно быть таким

export default{
    name: 'test',
    setup(props,context){

     return {}   // 这里返回的任何内容都可以用于组件的其余部分
    }
    // 组件的“其余部分”
}

получитьpropsиcontextфункционировать и будетsetupсодержание черезreturnподвергается воздействию остальной части компонента.

два,`setup`будь осторожен

Поскольку метод жизненного цикла Created не был выполнен при выполнении функции настройки, переменные и методы данных и методы не могут использоваться в функции настройки.
Поскольку мы не можем использовать данные и методы в функции настройки, Vue напрямую изменяет это значение в функции настройки на undefined, чтобы избежать неправильного использования.

3. Определите адаптивные данные

`ref` `reactive`

пропуск vue3ref reactiveопределить адаптивные данные

Как и реактивный, ref также является методом реализации адаптивных данных.

- Поскольку reactive должен передавать объект, будет очень проблематично, если мы хотим сделать переменную реактивной только в корпоративной разработке, поэтому Vue3 предоставляет нам метод ref для мониторинга простых значений.

refмы привыкли基本数据类型Определяемый как реагирующие данные (ref больше подходит для определения базовых типов данных), основная природа ref фактически является реактивной, и система автоматически преобразует его в ref в соответствии с переданным значением.ref(xx) -> reactive({value:xx})

reactiveиспользовал к引用类型Определяемый как отзывчивые данные, его сущность основана наProxyРеализовать объектный прокси

Базовый тип данных (один тип): кроме Объекта. String, Number, boolean, null, undefined.
тип ссылки: объект. Он содержит функцию, массив, дату.

определение

<script>
import {ref, reactive} from "vue";
export default {
  name: "test",
  setup(){
    // 基本类型
    const nub = ref(0)
    const str = ref('inline')
    const boo = ref(false)
    // 引用类型
    const obj = reactive({
      name:'inline',
      age:'18'
    })
    const arr = reactive(['0','1','2'])

    return{
      nub,
      str,
      boo,

      obj,
      arr,
    }
  }
}
</script>

использовать

<template>
    <div>
      <h1>基本类型</h1>
      <p>nub:{{ nub }}</p>
      <p>str:{{ str }}</p>
      <p>boo:{{ boo }}</p>
    </div>
    <div>
      <h1>引用类型</h1>
      <p>obj:{{ obj.name }}</p>
      <p>arr:{{ arr[1] }}</p>
    </div>
</template>

результат

Четыре,`toRefs`

если мы используемreactiveопределяется в виде响应式Переменная

setup(){
  const obj = reactive({
    name:'inline',
    gender:'男',
    age:'18'
  })

  return{
    obj
  }
}

использовать

<div>
  <p>姓名:{{ obj.name }}</p>
  <p>性别:{{ obj.gender }}</p>
  <p>年龄:{{ obj.age }}</p>
</div>

Таким образом, нам трудно использовать параметры в шаблоне, тогда мы хотим использовать его напрямую{{ name }}Способ доступа не подойдет, ответ выполним

Здесь мы используемes6спред оператор

setup(){
  const obj = reactive({
    name:'inline',
    gender:'男',
    age:'18',
  })

  return{
    ...obj,
  }
}

использовать

<div>
  <p>姓名:{{ name }}</p>
  <p>性别:{{ gender }}</p>
  <p>年龄:{{ age }}</p>
</div>

<div>
  <button @click="name = 'juejin'">改变姓名</button>
  <button @click="gender = '女'">改变性别</button>
  <button @click="age = '20'">改变年龄</button>
</div>

результат

动画.gif

Здесь мы видим, что наши параметры отображаются на странице нормально, но когда мы заходим изменить параметры, мы обнаруживаем, что представление не обновляется.Почему? ? ?

Мы запишем оператор распространения как его эквивалентную форму

const obj = reactive({
    name:'inline',
    gender:'男',A
    age:'18',
  })
// ...obj ==> name:obj.name

Эй, подождите минутку, как я могу подсказать, когда моя мышь всплывает?nameпросто строка?

Затем мы смотрим, что мы используемrefЧто подсказывать при определении значения

Ооо, на этот раз мы видимnameЯвляетсяRef<string>,Является响应式нить.

Таким образом, мы находим причину, по которой представление не обновляется, когда мы используем...扩展运算符То, что мы получаем, — это обычный тип значения, а не адаптивные данные.

Чтобы решить эту проблему, vue3 предоставляет намtoRefsфункция, давайте посмотрим, как это работает

setup(){
  const obj = reactive({
    name:'inline',
    gender:'男',
    age:'18',
  })

  return{
    ...toRefs(obj),
  }
}

<div>
  <p>姓名:{{ name }}</p>
  <p>性别:{{ gender }}</p>
  <p>年龄:{{ age }}</p>
</div>

<div>
  <button @click="name = 'juejin'">改变姓名</button>
  <button @click="gender = '女'">改变性别</button>
  <button @click="age = '20'">改变年龄</button>
</div>

Параметры могут быть изменены в обычном режиме, и преобразование прошло успешно.

动画1.gif

toRefsСводка

toRefsвозьмет нас один响应式объект превращается в普通объект, а затем преобразовать это普通对象Каждое свойство становится реактивными данными

пять,`setup`выполнить метод

метод первый

отreactiveСпособ определения реактивных данных для определения методов

<script>
import {ref, reactive,toRefs} from "vue";

export default {
  name: "test",
  setup(){
    const str = ref('inline')
    const fun = reactive({
      fun1(data){
        console.log(str.value)
        this.fun2(data)
      },
      fun2(data){
        console.log(data)
        console.log('我是fun2')
      }
    })

    return{
      ...toRefs(fun),
    }
  }
}
</script>

Передать значение событию кликаfun1,fun1После получения отправьте его наfun2

Здесь мы используемthis.fun2()способ позвонитьfun2, зачем использовать здесьthisМожет выполняться в обычном режиме без сообщенияundefind, потому что здесьthisнетthis, в Vue2thisэто пример здесьthisявляется объектом

<button @click="fun1('你好')">点我1</button>

В результате он успешно вызывается и выводится

Способ 2

Обратите внимание на вызов здесьfun2Способ отличается от способа один, его можно вызвать напрямую, не нужноthisперечислить

export default {
  name: "test",
  setup(){
      const fun1 = (data) => {
        fun2(data)
      }
      const fun2 = (data) => {
        console.log(data)
      }
    return{
      fun1,
    }
  }
}

перечислить

<button @click="fun1('你好 inline')">点我1</button>

результат

способ третий

Таким образом, вся функциональная логика не помещается в кучу.setupпроблема, мы можем написать отдельные функции как отдельные функции

а вот и яsetupнаписано снаружиfun() login()Две функциональные функции, и вызывать их отдельно в настройках

import {ref, reactive,toRefs} from "vue";

export default {
  name: "test",
  setup(){
    const test1 = fun()      // 如果函数返回参数过多，可以赋值给变量并用扩展运算符暴露给组件的其余部分
    const { test } = login() // 也可单个接收
    return{
      ...toRefs(test1),
      test,
    }
  }
}

// 功能1
function fun(){
  let str = ref('我是功能1')
  function fun1(data){
    console.log(str.value)
    fun2(data)
  }
  function fun2(data){
    console.log(data)
  }
  return{
    fun1,
    fun2,
  }
}

// 功能2
function login() {
  const obj = reactive({
    msg:'我是功能2，我爱掘金'
  })
  function test() {
    console.log(obj.msg)
  }
  return{
    test
  }
}
</script>

перечислить

<button @click="fun1('你好 inline')">点我1</button>
<button @click="test">点我2</button>

результат

动画.gif

способ четвертый

То же, что и в режиме 3, за исключением того, что мы извлекаем две функции и помещаем их в отдельные.jsв файле

Затем импортируйте компонент и вsetupвнутренний звонок

<template>
  <div style="text-align: center;margin-top: 50px">
    <button @click="fun1('你好 inline')">点我1</button>
    <button @click="test">点我2</button>
  </div>
</template>

<script>
import {ref, reactive,toRefs} from "vue";
import { fun,login } from './test.js'
export default {
  name: "test",
  setup(){
    const test1 = fun()
    const { test } = login()
    return{
      ...toRefs(test1),
      test,
    }
  }
}

</script>

выполнить нормально и ввести 动画.gif

способ пятый

Мы также можем написать так, здесь я определяюreactiveРеактивный объект, назначенныйloginПеременная, этот отзывчивый объект содержит то, что нам нужно для входа в систему.参数,验证и方法, здесь мы все положилиloginвнутри этого реактивного объекта, а затем используйтеtoRefsи扩展运算符незащищенный

<script>
import {ref, reactive,toRefs} from "vue";

export default {
  name: "test",
  setup(){
    const login = reactive({
      param: {
        username: '123',
        password: '123456',
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
      login(){
        this.param.username = 'inline'
        this.param.password = '123456'
        console.log('成功登录！')
      }
    })

    return{
      ...toRefs(login),
    }
  }
}
</script>

давайте использовать

<input type="text" v-model="param.username">
<input type="password" v-model="param.password">
<button @click="login">登录</button>

Нормальное выполнение, поэтому мы также можем записать все методы и связанные с ними параметры функции вreactiveвнутри объекта

表情包1.gif

Если есть какой-либо отсутствующий метод реализации, укажите его в области комментариев~~~

Шесть, настройка скрипта

script setupОн был официально выпущен в версии vue3.2.

использование

<script setup>

</script>

Разве это не супер просто

Переменные методы не должны`return`

использовать<script setup>, шаблон компилируется в функцию рендеринга, встроенную в область действия функции установки. Это означает, что любые привязки верхнего уровня, объявленные внутри<script setup>можно использовать прямо в шаблоне

<script setup>
  const msg = 'Hello!'
</script>

<template>
  <div>{{ msg }}</div>
</template>

script setupПеременные и методы, определенные внутри, не нужно возвращать, и их можно использовать напрямую.

импорт компонента

Импортированные компоненты не требуют регистрации и могут использоваться напрямую

<script setup>
  // 导入的组件也可以直接在模板中使用
  import Foo from './Foo.vue'
  import { ref } from 'vue'

  // 编写合成API代码，就像在正常设置中一样
  // 不需要手动返回所有内容
  const count = ref(0)
  const inc = () => {
    count.value++
  }
</script>

<template>
  <Foo :count="count" @click="inc" />
</template>

выпуск`Props`и`Emits`

<script setup>

  const props = defineProps({
    foo: String
  })
  
  const emit = defineEmits(['update', 'delete'])
</script>

обычный`script`и`script setup`

script setupможет иscriptодновременно существуют

<script>
  export const name = 1
</script>

<script setup>
  import { ref } from 'vue'

  const count = ref(0)
</script>

`script setup`Дополнительные опции

script setupдает нам большую частьoptions apiЭквивалентная способность

этоoptions apiчто можно сделатьscript setupБольшинство может сделать

Что ещеscript setupНе можете сделать это? следующее:

name
inheritAttrs
Параметры настройки, требуемые плагином или библиотекой

Так что, если я хочу использовать их? ответнаписать отдельно

<script>
  export default {
    name: 'CustomName',
    inheritAttrs: false,
    customOptions: {}
  }
</script>

<script setup>
  // script setup logic
</script>

defineExpose

script setupОпределенная переменная не будет отображаться по умолчанию, потому что переменная включена вsetupв закрытии. В этот момент мы можем использоватьdefinExpose({ })выставить внутренние свойства компонента для использования родительским компонентом

<script setup>
  const a = 1
  const b = ref(2)

  defineExpose({
    a,
    b
  })
</script>

Когда родительский компонент получает экземпляр этого компонента через ссылку на шаблон, полученный экземпляр будет таким:{ a: number, b: number }(ссылки автоматически расширяются, как в обычных экземплярах)

7. Пишите в конце

script setupЕсть еще много вещей, которые можно сказать, и когда я пойму это в последние несколько дней, я смогу опубликовать отдельный вопрос о его использовании.

Наконец, спасибо, что читаете~~~ Ваши лайки и чтение - самая большая поддержка для меня~~~

Прошлые статьи vue3:

# Экспериментируя с настройкой скрипта в vue3.2, попробуйте применить ...toRefs

# Что такое составной API Vue3?

Введение

два,setupбудь осторожен

3. Определите адаптивные данные

ref reactive

Четыре,toRefs

toRefsСводка

пять,setupвыполнить метод

метод первый

Способ 2

способ третий

способ четвертый

способ пятый

Шесть, настройка скрипта

Переменные методы не должныreturn

импорт компонента

выпускPropsиEmits

обычныйscriptиscript setup

script setupДополнительные опции

defineExpose

7. Пишите в конце

два,`setup`будь осторожен

`ref` `reactive`

Четыре,`toRefs`

пять,`setup`выполнить метод

Переменные методы не должны`return`

выпуск`Props`и`Emits`

обычный`script`и`script setup`

`script setup`Дополнительные опции