Какие серьезные изменения в Vue 3.0 выявил

Vue.js

Несколько основных элементов обновления vue

  • Встроенная модуляризация метода import {value,computed,watch,onMounted} from 'vue'
  • Алгоритм diff переработан, скорость увеличена в 6 раз
  • Улучшить поддержку машинописного текста
  • Открыть больше низкоуровневых функций
  • Конечно, самое главное - это функция, основанная на

функция, основанная на том, что она делает

Функция на основе в основном заменяет миксины Сначала сравните метод вызова миксинов и функций на основе

mixins

mixins: [mixin]

Миксины Очевидно, что мы не знаем, какие методы и данные он нам предоставляет, что приводит к неясным источникам данных, а внедрение нескольких миксинов также может вызвать конфликты имен.

function based

const { x, y } = useMouse()

И функция, основанная на функциях, очевидно, требует, чтобы мы в первую очередь извлекали то, что мы используем, поэтому она может очень хорошо решить эти проблемы, и для решения этой проблемы также существуют крючки реакции, а продвинутые компоненты, очевидно, также делают источник данных неясным. Конец основан на сравнении хуков реакции и функции vue. Я не буду вдаваться в подробности здесь.

Функция на основе выявляет проблемы vue

Если функция основана на простом замещении микширования, то все. Однако оказалось, что на основе функций лучше поддерживается машинописный текст.

Давайте посмотрим, как писать компоненты, используя функции.Конечно, я считаю, что 3.0 должен по-прежнему сохранять метод написания компонентов 2.0.

import { value, computed, watch, onMounted } from 'vue'

const App = {
  template: `
    <div>
      <span>count is {{ count }}</span>
      <span>plusOne is {{ plusOne }}</span>
      <button @click="increment">count++</button>
    </div>
  `,
  setup() {
    // reactive state
    const count = value(0)
    
    // computed 的不在有指定区域了,每个computed都要调用一个computed的函数包装了
    const plusOne = computed(() => count.value + 1)
    
    // method 也没有指定区域了
    const increment = () => { count.value++ }
    
    // watch 也没有指定区域了, 也要一个watch实际都要包装一个watch函数了
    watch(() => count.value * 2, val => {
      console.log(`count * 2 is ${val}`)
    })
    
    // lifecycle
    onMounted(() => {
      console.log(`mounted`)
    })
    
    // 2.0 的data
    return {
      count,
      plusOne,
      increment
    }
  }
}

Смотря, не ближе ли он к jsx, подумайте, такой ли у react, нет ли выделенной области для различных методов, и вам нужно вызывать его самостоятельно.

Поскольку написание компонента машинописного текста сильно изменилось, будет ли еще что-то, что заставит снова изменить написание vue? Почему я не слишком беспокоюсь о реакции, давайте посмотрим, как написана реакция

// 函数
function FriendListItem(props) {
    // 函数
  const isOnline = useFriendStatus(props.friend.id);

    // return出去的值
  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

Это больше похоже на нативный js?Все библиотеки, фреймворки и т.д. будут совместимы с нативным js.Это точно.Если даже нативный js не совместим, он не называется js библиотекой или фреймворком. Тогда этот способ написания реакции, очевидно, проще для внедрения различных библиотек и обеспечения совместимости с различными библиотеками.На этот раз я вижу с рождения машинописный текст, и я буду стоять на месте, когда реакция подвергается воздействию ветра и дождя. И vue был радикально изменен.

Вот почему я должен беспокоиться о том, столкнется ли Vue с внешними причинами в следующий раз и внесет ли большое изменение.

Сравнение функциональных и реагирующих хуков

С функциональной точки зрения все добились логического повторного использования для замены исходных примесей и компонентов более высокого порядка. Также решены некоторые оригинальные проблемы.

Вторая функция, основанная на функции vue, должна быть совместима с машинописным текстом.

Реакт-хуки — это имитировать жизненный цикл, попытаться отказаться от экземпляра класса и обратиться к чистой функции.Каждый должен знать, что производительность чистой функции лучше, чем у экземпляра класса, повторное использование.

Суммировать

Vue имеет хорошее улучшение производительности и добавил больше базовых API. Я считаю, что это будет полезно для всех. Vue должен наводить на размышления из-за модификации машинописного текста. Не имеет значения, совместим ли vue только с IE11, а я не консерватор Прежде всего, все компьютеры в основном поставляются с IE11. Что касается IE8, то это все в старых системах типа xp. Что касается нужд некоторых отдельных отделов, которым нужен IE8, мы обычно используем jq и webpack для создания многостраничных приложений. Vue2.x не сможет вам. Так что это изменение на самом деле не имеет большого значения для бизнеса.

Конечно, обновление diff от vue, очевидно, значительно улучшит производительность React должен применить идею vue diff к своему собственному diff в будущем. Некоторые люди в сообществе всегда говорят, что vue скопировал кого угодно и кого угодно, я на самом деле не согласен с этой точкой зрения. Конечно, восходящая звезда должна обращаться к идеям старшего поколения, применять и трансформировать их, и другим страшно думать об этом за закрытыми дверями. Конечно, у vue есть новые идеи, и react обязательно на них сошлется. Цель каждого состоит в том, чтобы сделать общество более процветающим.

При этом не люблю, когда другие говорят какой плохой IE, вы дайте хрому посмотреть в xp, наверное так оно и есть