vue3 "ощущение после использования"

Vue.js

Исходный код vue3 был открыт в течение длительного времени, и официальный сайт также быстро выпустил новые документы. Но моя скорость всегда сравнима со скоростью улитки. Точно, недавно появился проект по vue3. Тогда я напишу“用后感”Бар! Поделитесь пониманием vue3, полученным в проекте, со всеми.

Вот простое резюме.Я лично считаю, что моменты, на которые стоит обратить внимание в vue3:

  • 1. Изменения в механизме перехвата данных
  • 2. Внедрение комбинированного API
  • 3. Серия сюрпризов, которые принесла функция настройки
  • 4. Практическое применение адаптивного API

1. Изменения в механизме перехвата данных

vue2 перехватывает изменения данных через Object.defineProperty(). После обновления до vue3 автор больше не использует Object.defineProperty для захвата данных, а использует новые возможности es6.proxyдля захвата данных. Поскольку в vue2 отзывчивые данные должны быть предварительно определены инициализацией data(), но после vue3 данные в data больше не отслеживаются в ответ, а преобразуются вproxyЗатем агент выполняет отслеживание обновлений.

code view

注意: В vue3 он будет использовать геттер или сеттер для обхода всех свойств и преобразования их в прокси-прокси для любых данных, определенных в функции data().

Во-вторых, введение комбинированного API

Самым большим изменением в vue3 является введение composerApi, который является основной частью vue3.

В том числе следующие аспекты:

  • А. функция настройки

Следующий раздел имеет подробное представление, поэтому я не буду вносить в подробности здесь.

  • б. Крючки жизненного цикла

Vue3 отказывается от глобального API, вводяonXВ виде функции настройки поддерживается вызов функции ловушки.

  • c. Обеспечить/внедрить

Vue3 также поддерживает использование Provide и Inject в функции настройки, если они представлены в соответствующем месте:

import { provide } from 'vue';
setup(){
	provide(name, 'hello!');
}

import {inject} from 'vue';
setup(){
	inject('name', [default-value]: string);
}

  • г. получить текущий экземпляр

Поддержка доступа к собственному экземпляру в функции настройки

import { getCurrentInstance } from 'vue';
setup() {
	const internalInstance = getCurrentInstance();
}

3. Серия сюрпризов, которые принесла функция настройки

В vue3 введение функции настройки, этого функционального метода разработки, хорошо интегрирует код.

  • В vue2 к данным данных необходимо обращаться, вызывая это, когда они используются.Теперь в vue3 реактивный и ref используются для установки отзывчивых данных.
data() {
    return {
        name: 'aaa',
    };
}

=>

const name = ref('aaa');  
就像简单的定义变量一样，使用ref就可以为变量初始化
  • Функция настройки заменяет метод определения функции методов

В функции настройки мы можем выборочно показывать функции, которые мы определяем, внешнему миру. В vue2 функции, которые мы определяем в методах, привязаны к этому.this得有多累啊 (> 3 >), а функция setup просто решает эту проблему и защищает приватные переменные, которые мы определяем сами.

methods: {
    function unkouwnFunc() {
        console.log(3333);
    }
},

=>

setup () {
    function unkownFunc() {
        console.log(3333);
    }

    return {
        unkownFunc, // return之后，该函数绑定到了组件实例上，可以在模版中直接使用
    };
}
  • Об использовании события emit в функции настройки
import { SetupContext } from 'vue';
  	
emits: ['eventName'],
setup(props, ctx: SetupContext){
    ctx.emit('event-name', value);
}
  • Кроме того, для поддержки функции настройки автор выбрасывает хук глобального жизненного цикла, который действует только в функции настройки.
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

setup() {
    onBeforeMount() {
        your code
    }
    onMounted () {
        your code
    }
    onBeforeUpdate() {
        your code
    }
    onUpdated() {
        your code
    }
    onBeforeUnmount() { 
        your code
    }
    onUnmounted() {
        your code
    }
}

В-четвертых, практическое применение адаптивного API.

  • Ref Vs Reactive

    ref — это способ создания примитивного типа данных, который возвращает объект RefImpl. value указывает на его связанное значение. Возвращает свое значение реактивному объекту, если используется для создания объекта.

    Реактивный объект возвращает прокси-прокси, когда он создается, он будет проходить каждое свойство одно за другим и создавать его как прокси-метод es6.

    ref & reactive

    Из распечатанных данных мы видим, что .value типа объекта, созданного данными ref, соответствует реактивной структуре данных. То есть, когда ref создает данные объектного типа, они автоматически преобразуются в реактивные данные.

  • Удобство Ref и реактивных API

    Реактив ref в vue3 очень прост в использовании, почему вы так говорите? Потому что vue напрямую дает здесь свой глобальный API. В любом случае мы можем напрямую импортировать и создавать эти адаптивные данные. Импортируя, экспортируя, внедряя код集中化管理.

    так называемый集中化管理, Здесь имеется в виду улучшение гибкости кода.В vue2 хранилище используется для централизованного управления состоянием, а теперь мы можем напрямую отказаться от хранилища. Потому что отзывчивый API vue3 дает нам очень приятный опыт.

>> state.js 
    
  store = {
    state: reactive({
      count: 0,
    })
  };

  export default store;
        
=>
    
import store from 'state.js';
setup() {
  // set count
  store.count = 2;
  // get count
}
  • Об использовании вычислений и часов
computed: {
	aaa() => {
        	return 333
        }
    },
    watch: {
    	bbb(newv, oldv) {
        	console.log(newv, oldv);
        }
    },
}
    

=>
    
import { computed } from 'vue';

const aaa = computed(() => {
  return 333;
})

watch & watchEffect

import {watchEffect, watch} from 'vue';

// watch 实现了$watch全部的功能
// 单个数据源侦听
watch((bbb, (current, prev)) => {
  Your Code
});

// 多个数据源的侦听
watch([aaa, bbb], ([current, prev], [current2, prev2]) => {
  Your Code
})


// watchEffect 只追踪依赖项的变更，在变化时，会执行回调函数
const aaa = ref(0);
watchEffect(() => {
  console.log(aaa.value);
});

watch VS watchEffect

  • 1. Ленивое слушание

    watchEffect имеет только функцию отслеживания изменений и будет выполнять функции обратного вызова при отслеживании зависимостей. По сравнению с watch он будет лениво прослушивать зависимости и не будет выполнять функцию обратного вызова при отслеживании зависимостей.

  • 2, поддержка текущего и предыдущего государственного визита

  • 3. Объясните более конкретно, при каких обстоятельствах должна запускаться функция подкачки.

    Должно быть, watch дает больше возможностей, чем watchEffect. Например, чтобы получить предыдущий и текущий статус, через изменение статуса мы можем судить о том, выполняется ли соответствующий обратный вызов.

Для получения более подробной информации, пожалуйста, нажмите здесь>

END TK U

Категории