Напишите товарищам vue, чтобы отреагировали (4)

Vue.js React.js
Напишите товарищам vue, чтобы отреагировали (4)

Эта серия статей будет постепенно углубляться от мелкого к более глубокому и поможет вам шаг за шагом оценить сходства и различия между react и vue, чтобы вы могли реагировать левой рукой, а Vue — правой.

Предпосылки для рассмотрения:

Написал vue очередь реагировать товарищи (1)

Напишите товарищам, которые конвертируют vue в реакцию (2)

Напишите товарищам, которые переходят с vue на react (3)

По просьбам мастеров эта статья начинает охватыватьhooks, эта бумага будетvue3а такжеreact 17.x（hooks）Сравните и почувствуйте сходства и различия между двумя фреймворками.

Сегодняшняя тема:

  1. vue3 и реагировать на определение и изменение данных

Vue3 и React Cloots Определения и изменение данных

На самом деле оба предвзятыhooksСпособ написания, такая очень гибкая комбинация, я думаю, что большинство людей все еще находят ее ароматной, будь то предыдущаяvue optionsилиreact classМетоды письма относительно раздуты и менее пригодны для повторного использования (по сравнению сhooks). Ниже приведен пример для сравнения.

vue3

<template>
    <div>
        <p @click='setObj'>age: {{obj.age}}</p>
        <p>sex: {{obj.sex}}</p>
    </div>
</template>
<script>
import { reactive } from 'vue'
export default {
    setup() {
        const obj = reactive({
          age: 25,
          sex: 'man'
        })
        function setObj() {
            obj.age ++
        }
        return {
            obj,
            setObj
        }
    }

}
</script>

react

import { useState } from 'react';
function App() {
    const [todos, setTodos] = useState({ 
        age: 25,
        sex: 'man'
    })
    const setObj = () => {
        setTodos({
            ...todos,
            age: todos.age + 1
        })
    }
    return (
        <div>
            <p onClick={setObj}>{todos.age}</p>
            <p>{todos.sex}</p>
        </div>
    );
}

Сравнивая приведенный выше код, мы видим, чтоvue3а такжеreact hooksОсновное написание аналогично, ноvueпродвигатьtemplateПишу,reactпродвигатьjsxПравило именования, шаблон не влияет на васjsИспользуется логика, поэтому независимо от фреймворка, как изменить,jsЭто также наша передняя железная чаша для риса, пожалуйста, обязательно освойте ее!

vue3 и реагировать на вычисляемые свойства

Назначение свойства вычисляемого состоит в том, чтобы помешать нам писать слишком сложные операции над шаблоном, что и является значением свойства вычисляемого.vue3предоставлено вcomputedметод,react hookпри условииuseMemoДавайте реализуем вычисляемые свойства (нотация класса не может использоватьсяgetПодробнее о реализации вычисляемых свойств см. в предыдущих статьях)

vue3

<template>
    <div>
        <p>age: {{obj.age}}</p>
        <p>sex: {{obj.sex}}</p>
        <p>info: {{people}}</p>
    </div>
</template>
<script>
import { reactive, computed } from 'vue'
export default {
    setup() {
        const obj = reactive({
          age: 25,
          sex: 'man'
        })
        const people = computed(() => {
          return `this people age is ${obj.age}, sex is ${obj.sex}`
        })
        return {
          obj,
          people
        }
    }

}
</script>

react

import { useMemo, useState } from 'react'
function App() {
    const [obj, setObj] = useState({ 
        age: 25,
        sex: 'man'
    })
    const people = useMemo(() => {
        return `this people age is ${obj.age} and sex is ${obj.sex}`
    }, [obj])
    return (
        <div>
            <p>age: {obj.age}</p>
            <p>sex: {obj.sex}</p>
            <p>info: {people}</p>
        </div>
    )
}

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

существуетvue3внутриwatchОн подвергается предложению, проходящей в параметрах соответствующего слушателя и функции обратного вызова.reactАналогичная функция есть и вuseEffect, на самом деле он иcomponentDidMount,componentDidUpdate а также componentWillUnmountИмеет ту же цель, просто слился в одинAPI. См. пример:

vue3

<template>
    <div>
        <p @click="setCount">count: {{count}}</p>
    </div>
</template>
import { ref, watch } from 'vue'
export default {
    setup() {
        const count = ref(0)
        watch(count,
          (val) => {
            console.log(val)
          },
          { immediate: true, deep: true }
        )
        function setCount() {
          count.value ++
        }
        return {
            count,
            setCount
        }
    }
    
}

react

import { useState, useEffect } from 'react'
function App() {
    const [count, setCount] = useState(0)
    const setCount = () => {
        setCount(count + 1)
    }
    useEffect(() => {
        console.log(count)
    })
    return (
        <div>
            <p onClick={setCount}>count: {count}</p>
        </div>
    )
}

можно увидеть,vue3Общая тенденция состоит в том, чтобыhooksДа ладно, нетрудно заметить, что независимо от того, какой фреймворк в будущем, есть большая вероятность, что он в конечном итоге перейдет кhooksЗависит от,react hooksЭто, несомненно, большое вдохновение для нас, функциональное программирование будет становиться все более и более популярным, от традиционных трех королей в древние времена.html、css、scriptМожет создать страницу для текущей компонентизации,jsТо есть страница.

Суммировать

В тренде функциональное программирование, но на самом деле существует много старых проектов, основанных наvue2.xизoptionsправописание илиreact classЕсть еще много способов его написать.Миграция и итерация этих проектов до последних - головная боль.Конечно, выбор технической системы, подходящей для существующих проектов, является самым важным.

Категории