واکنش در Vue – مجله سر و صدا

درباره نویسنده

توسعه دهنده Front-end مستقر در لاگوس ، نیجریه. او از تبدیل طرح ها به کد و ساخت وسایل برای وب لذت می برد.
اطلاعات بیشتر در مورد تیمی

در این مقاله ، ما می خواهیم واکنش در Vue ، نحوه کار آن و نحوه ایجاد متغیرهای واکنشی را با استفاده از روش ها و توابع تازه ایجاد شده بررسی کنیم. هدف این مقاله توسعه دهندگانی است که درک خوبی از نحوه کار Vue 2.x داشته و به دنبال آشنایی با نسخه جدید هستند نمایش 3.

ما قصد داریم برای درک بهتر این موضوع یک برنامه ساده بسازیم. کد این برنامه را می توان یافت در GitHub.

به صورت پیش فرض، جاوا اسکریپت واکنش پذیر نیست. این بدان معنی است که اگر متغیر را ایجاد کنیم boy و آن را در قسمت A برنامه ما ارجاع دهید ، سپس اقدام به اصلاح کنید boy در بخش B ، بخش A با مقدار جدید به روز نمی شود boy.

let framework = 'Vue';
let sentence = `${framework} is awesome`;
console.log(sentence)
 // logs "Vue is awesome"
framework = 'React';
console.log(sentence)
//should log "React is awesome" if 'sentence' is reactive.

قطعه بالا نمونه کاملی از غیر واکنشی بودن جاوا اسکریپت است – از این رو ، چرا این تغییر در sentence متغیر.

در Vue 2.x ، props، computed، و data() همه به طور پیش فرض واکنش پذیر بودند ، به استثنای خصوصیاتی که در آنها وجود ندارد data وقتی چنین اجزایی ایجاد می شوند. این بدان معنی است که وقتی یک جز component به داخل تزریق می شود داوری، فقط خواص موجود در این جزاست data اگر و وقتی چنین خصوصیاتی تغییر کند ، شی باعث بروزرسانی ملفه خواهد شد.

در داخل ، Vue 3 از Proxy هدف – شی (ویژگی ECMAScript 6) برای اطمینان از واکنش پذیری این ویژگی ها ، اما همچنان گزینه استفاده را فراهم می کند Object.defineProperty از جانب نمای 2 برای پشتیبانی اینترنت اکسپلورر (ECMAScript 5). این روش ویژگی جدیدی را مستقیماً روی یک شی defin تعریف می کند ، یا یک ویژگی موجود را بر روی یک شی mod اصلاح می کند و شی returns را برمی گرداند.

در نگاه اول و از آنجا که اکثر ما از قبل می دانیم واکنش پذیری در Vue جدید نیست ، استفاده از این ویژگی ها غیرضروری به نظر می رسد ، اما گزینه های API محدودیت هایی دارد که با یک برنامه بزرگ با عملکردهای قابل استفاده مجدد در چندین کار روبرو هستید بخشهایی از برنامه برای این منظور ، جدید API ترکیب برای کمک به منطق انتزاعی به منظور سهولت در خواندن و نگهداری پایگاه کد ، معرفی شد. همچنین ، اکنون می توانیم هر متغیری را به راحتی و بدون در نظر گرفتن واکنش پذیر نشان دهیم نوع داده با استفاده از هر یک از خواص و روش های جدید.

وقتی ما از setup گزینه ، که به عنوان نقطه ورود به API ترکیب ، عمل می کند data هدف – شی، computed خواص ، و methods غیرقابل دسترسی هستند زیرا نمونه م componentلفه هنوز در چه زمانی ایجاد نشده است setup اعدام می شود این باعث می شود که امکان استفاده از واکنش پذیری داخلی در هر یک از این ویژگی ها در setup. در این آموزش ، ما می خواهیم با تمام روش های انجام این کار آشنا شویم.

روش واکنش پذیر

طبق مستندات ، reactive روش ، که برابر است با Vue.observable() در Vue 2.6 ، هنگامی می خواهیم مفید باشد که بخواهیم جسمی ایجاد کنیم که تمام خصوصیات آن واکنش پذیر باشد (مانند data شی در API گزینه ها). زیر کاپوت ، data شی in در API گزینه ها از این روش برای واکنش پذیری تمام خصوصیات موجود در آن استفاده می کند.

اما ما می توانیم شی reac واکنشی خود را مانند این ایجاد کنیم:

import { reactive } from 'vue'

// reactive state
let user = reactive({
        "id": 1,
        "name": "Leanne Graham",
        "username": "Bret",
        "email": "Sincere@april.biz",
        "address": {
            "street": "Kulas Light",
            "suite": "Apt. 556",
            "city": "Gwenborough",
            "zipcode": "92998-3874",
            "geo": {
                "lat": "-37.3159",
                "lng": "81.1496"
            }
        },
        "phone": "1-770-736-8031 x56442",
        "website": "hildegard.org",
        "company": {
            "name": "Romaguera-Crona",
            "catchPhrase": "Multi-layered client-server neural-net",
            "bs": "harness real-time e-markets"
        },
        "cars": {
            "number": 0
        }
    })

در اینجا ، ما واردات reactive روش از Vue ، و سپس ما خود را اعلام کردیم user متغیر با انتقال مقدار آن به این تابع به عنوان آرگومان. با این کار ، ما ساخته ایم user واکنشی ، و بنابراین ، اگر ما استفاده کنیم user در الگوی ما و اگر شی یا ویژگی این شی تغییر کند ، این مقدار به طور خودکار در این الگو به روز می شود.

ref

همانطور که ما روشی برای واکنش پذیری اشیا have داریم ، برای ساختن نیز به روشی نیاز داریم سایر ارزشهای بدوی مستقل (رشته ها ، بولین ها ، مقادیر تعریف نشده ، اعداد و غیره) و آرایه ها واکنش پذیر هستند. در طول توسعه ، ما با این نوع داده های دیگر کار خواهیم کرد در حالی که نیاز به واکنش پذیری نیز داریم. اولین روشی که ممکن است به آن فکر کنیم استفاده از آن است reactive و مقدار متغیری را که می خواهیم واکنش پذیر باشد ، منتقل کنیم.

import { reactive } from 'vue'

const state = reactive({
  users: [],
});

زیرا reactive دارای تبدیل واکنشی عمیق است ، user به عنوان یک دارایی نیز واکنش پذیر خواهد بود ، در نتیجه به هدف ما می رسیم. از این رو ، user همیشه در هر کجا که در الگوی چنین برنامه ای استفاده شود به روز می شود. اما با ref خاصیت ، ما می توانیم با انتقال مقدار آن متغیر به هر متغیر با هر نوع داده ، واکنش پذیر کنیم ref. این روش برای اشیا works نیز کار می کند ، اما شی deep را یک سطح عمیق تر از زمانی که قرار دارد لانه می کند reactive روش استفاده می شود

let property = {
  rooms: '4 rooms',
  garage: true,
  swimmingPool: false
}
let reactiveProperty = ref(property)
console.log(reactiveProperty)
// prints {
// value: {rooms: "4 rooms", garage: true, swimmingPool: false}
// }

در زیر کاپوت، ref این استدلال را به آن منتقل می کند و آن را به یک شی با یک کلید تبدیل می کند value. این بدان معنی است که ما می توانیم با تماس به متغیر خود دسترسی پیدا کنیم variable.value، و ما همچنین می توانیم مقدار آن را با فراخوانی همان روش تغییر دهیم.

import {ref} from 'vue'
let age = ref(1)

console.log(age.value)
//prints 1
age.value++
console.log(age.value)
//prints 2

با این کار می توانیم وارد کنیم ref در م componentلفه ما و ایجاد یک متغیر واکنشی:

<template>
  <div class="home">
    <form @click.prevent="">
      <table>
        <tr>
          <th>Name</th>
          <th>Username</th>
          <th>email</th>
          <th>Edit Cars</th>
          <th>Cars</th>
        </tr>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.name }}</td>
          <td>{{ user.username }}</td>
          <td>{{ user.email }}</td>
          <td>
            <input
              type="number"
              style="width: 20px;"
              name="cars"
              id="cars"
              v-model.number="user.cars.number"
            />
          </td>
          <td>
            <cars-number :cars="user.cars" />
          </td>
        </tr>
      </table>
      <p>Total number of cars: {{ getTotalCars }}</p>
    </form>
  </div>
</template>
<script>
  // @ is an alias to /src
  import carsNumber from "@/components/cars-number.vue";
  import axios from "axios";
  import { ref } from "vue";
  export default {
    name: "Home",
    data() {
      return {};
    },
    setup() {
      let users = ref([]);
      const getUsers = async () => {
        let { data } = await axios({
          url: "data.json",
        });
        users.value = data;
      };
      return {
        users,
        getUsers,
      };
    },
    components: {
      carsNumber,
    },
    created() {
      this.getUsers();
    },
    computed: {
      getTotalCars() {
        let users = this.users;
        let totalCars = users.reduce(function(sum, elem) {
          return sum + elem.cars.number;
        }, 0);
        return totalCars;
    },
  };
</script>

در اینجا ، ما وارد کردیم ref به منظور ایجاد یک واکنش پذیر users متغیر در م ourلفه ما. سپس وارد کردیم axios برای واکشی داده ها از یک فایل JSON در public پوشه ، و ما خود را وارد کردیم carsNumber جز component ، که بعداً ایجاد خواهیم کرد. کار بعدی ما ایجاد واکنش پذیر بود users متغیر با استفاده از ref روش ، به طوری که users هر زمان پاسخ پرونده JSON ما تغییر کند ، می تواند به روز شود.

ما همچنین ایجاد کردیم getUser عملکردی که users آرایه ای از فایل JSON ما با استفاده از بدیهیات، و ما مقدار حاصل از این درخواست را به users متغیر. سرانجام ، ما یک ویژگی محاسبه شده ایجاد کردیم که تعداد کل اتومبیل های کاربران ما را محاسبه می کند زیرا ما آن را در بخش الگو اصلاح کردیم.

توجه به این نکته مهم است که هنگام دسترسی ref خصوصیاتی که در بخش الگو یا خارج از آن بازگردانده می شوند setup()، آن ها هستند به طور خودکار کم عمق باز می شود. این بدان معنی است که refs که یک شی هستند هنوز هم نیاز به یک .value به منظور دستیابی زیرا users یک آرایه است ، ما به راحتی می توانیم استفاده کنیم users و نه users.value که در getTotalCars.

در بخش الگو ، جدولی را نمایش می دهیم که اطلاعات هر کاربر را به همراه a نمایش می دهد <cars-number /> جزء. این جز component قبول می کند cars prop که در ردیف هر کاربر به عنوان تعداد اتومبیل هایشان نمایش داده می شود. این مقدار هر زمان که مقدار آن به روز شود cars تغییرات در شی کاربر، که دقیقاً چگونه است data شی یا computed اگر ما با گزینه های API کار می کردیم ، ویژگی کار می کرد.

toRefs

وقتی از Composition API استفاده می کنیم ، setup تابع دو آرگومان را می پذیرد: props و context. این props از م componentلفه به منتقل می شود setup()، و دسترسی به وسایل مورد نیاز م thatلفه را از داخل این API جدید امکان پذیر می کند. این روش به ویژه مفید است زیرا تخریب اشیا بدون اینکه واکنش پذیری خود را از دست بدهد.

<template>
  <p>{{ cars.number }}</p>
</template>
<script>
  export default {
    props: {
      cars: {
        type: Object,
        required: true,
      },
      gender: {
        type: String,
        required: true,
      },
    },
    setup(props) {
      console.log(props);
   // prints {gender: "female", cars: Proxy}
    },
  };
</script>
<style></style>

برای استفاده از مقداری که از آن یک شی باشد props در Composition API ضمن اطمینان از اینکه واکنش پذیری خود را حفظ می کند ، از آن استفاده می کنیم toRefs. این روش یک جسم واکنشی را می گیرد و آن را به جسمی ساده تبدیل می کند که در آن هر خاصیت جسم واکنشی اصلی به یک تبدیل می شود ref. معنی این این است که cars تکیه گاه

cars: {
  number: 0
}

… حالا این می شوم:

{
  value: cars: {
    number: 0
  }

با این کار می توانیم از cars در داخل هر بخشی از API راه اندازی در حالی که هنوز واکنش خود را حفظ می کند.

 setup(props) {
      let { cars } = toRefs(props);
      console.log(cars.value);
      // prints {number: 0}
    },

ما می توانیم این متغیر جدید را با استفاده از Composition API مشاهده کنیم watch و هر طور که بخواهیم به این تغییر واکنش نشان دهیم.

setup(props) {
      let { cars } = toRefs(props);
      watch(
        () => cars,
        (cars, prevCars) => {
          console.log("deep ", cars.value, prevCars.value);
        },
        { deep: true }
      );
    }

toRef

مورد معمول دیگری که می توانیم با آن روبرو شویم این است عبور یک مقدار که لزوماً یک شی نیست بلکه یکی از انواع داده هایی است که با آنها کار می کند ref (آرایه ، عدد ، رشته ، بولین و غیره). با toRef، می توانیم یک خاصیت واکنش پذیر ایجاد کنیم (یعنی ref) از یک شی reac واکنشی منبع. با این کار اطمینان حاصل می شود که خاصیت واکنش پذیر باقی می ماند و هر زمان منبع اصلی تغییر کند ، به روز می شود.

const cars = reactive({
  Toyota: 1,
  Honda: 0
})

const NumberOfHondas = toRef(state, 'Honda')

NumberOfHondas.value++
console.log(state.Honda) // 1

state.Honda++
console.log(NumberOfHondas.value) // 2

در اینجا ، ما با استفاده از reactive روش ، با خواص Toyota و Honda. ما همچنین استفاده کردیم toRef برای ایجاد یک متغیر واکنش پذیر از Honda. از مثال بالا ، می توانیم هنگام بروزرسانی متوجه شویم Honda با استفاده از واکنش دهنده cars شی یا NumberOfHondas، مقدار در هر دو مورد به روز می شود.

این روش مشابه و در عین حال بسیار متفاوت از روش است toRefs روشی که در بالا به آن اشاره کردیم به این معنی که ارتباط خود را با منبع خود حفظ می کند و می تواند برای رشته ها ، آرایه ها و اعداد استفاده شود. بر خلاف با toRefs، ما نیازی به نگرانی در مورد وجود املاک در منبع آن در زمان ایجاد نداریم ، زیرا اگر این خاصیت در زمانی وجود نداشته باشد که این ref ایجاد می شود و در عوض باز می گردد null، هنوز هم به عنوان یک ویژگی معتبر ، با شکلی ذخیره می شود watcher در جای خود قرار دهید ، به طوری که وقتی این مقدار تغییر می کند ، این ref ایجاد شده با استفاده از toRef همچنین به روز می شود.

همچنین می توانیم از این روش برای ایجاد a استفاده کنیم خاصیت راکتیو از جانب props. به این شکل خواهد بود:

<template>
  <p>{{ cars.number }}</p>
</template>
<script>
  import { watch, toRefs, toRef } from "vue";
  export default {
    props: {
      cars: {
        type: Object,
        required: true,
      },
      gender: {
        type: String,
        required: true,
      },
    },
    setup(props) {
      let { cars } = toRefs(props);
      let gender = toRef(props, "gender");
      console.log(gender.value);
      watch(
        () => cars,
        (cars, prevCars) => {
          console.log("deep ", cars.value, prevCars.value);
        },
        { deep: true }
      );
    },
  };
</script>

در اینجا ، ما ایجاد کردیم ref که بر اساس gender مال بدست آمده از props. این کار به ما کمک می کند وقتی که می خواهیم عملیات اضافی را روی پایه یک جز particular خاص انجام دهیم.

نتیجه

در این مقاله ، ما با استفاده از برخی از روشها و توابع تازه معرفی شده از Vue 3 ، به نحوه عملکرد واکنش Vue پرداخته ایم. ما با بررسی اینکه واکنش پذیری چیست و Vue چگونه از Proxy هدف – شی پشت صحنه برای رسیدن به این. ما همچنین بررسی کردیم که چگونه می توانیم با استفاده از آن اشیا using واکنشی ایجاد کنیم reactive و چگونگی ایجاد خصوصیات واکنشی با استفاده از ref.

سرانجام ، ما در مورد چگونگی تبدیل اشیا واکنشی به اشیا plain ساده ، که ویژگی هر یک از آنها است ، بررسی کردیم ref با اشاره به خاصیت مربوط به شی original اصلی ، و ما دیدیم که چگونه یک ref برای یک خاصیت روی یک شی منبع واکنشی.

منابع بیشتر

(ks ، vf ، yk ، il ، al)