백엔드 프레임워크로서의 비클래식 Vue Vue

우리가 집을 떠나 행사에 참가할 수 있었던 날을 기억하십니까?아주 오래 전 일인 것 같지만 실제로 VueConf US 2020은 한 달여 전 일이다.VueConf에는 900여 명의 참석자가 참석한 가운데 이틀간의 멋진 강연이 활기차고 디자인 시스템부터 Vue 3의 핫한 새로운 합성 API까지 주제가 담겨 있다.모든 사람들과 한 방에서 나에게 중요한 주의를 주었다. 베어 커뮤니티는 놀라운 우호적인 사람들로 가득 차 있고, 그들은 끊임없이 공부하고 향상시키기를 갈망한다.만약 이것이 유일한 일이라면, Vue는 아주 좋은 틀이 될 것이다. 그러나 그것도 단지 장관의 전체적인 틀일 뿐이다.
나도 VueConf에서 강연할 기회가 있다Unconventional Vue—Vue as a Backend Framework.내가 처음으로 Vue3을 진지하게 연구하고 새로운 관찰성 API를 추가한 것을 보았을 때, 나는 내가 앞부분 밖에서 생각한다면 틀림없이 어리석은 일을 할 수 있을 것이라는 것을 알았다.이 새 API는 Vue(이전)의 내부 관측성 모델을 공개했다.Vue 구성 요소의 데이터가 변경되면 뷰가 업데이트됩니다.나는 그것을 이용하여 실시간 데이터 애니메이션을 구동하고 채팅 클라이언트를 만들거나 응용 프로그램 데이터의 변화에 적응하기 위해 AWS Lambda 기능을 더욱 잘 촉발할 수 있다고 생각한다.그래서 나의 강연이 탄생했다.
Vue와 같은 제목이 백엔드 프레임워크로 되어 있기 때문에 제 강연을 듣는 많은 사람들이 제 강연에 대해 의심을 많이 할 것입니다. 제가 서버 쪽 렌더링 같은 것을 하고 있거나 우리가 예전에 들은 또 다른 이야기를 가지고 있다고 생각할 것입니다.하지만 그것은 어느 정도 환영을 받은 것 같다!누군가가 나의 대화에서 적어도 한 가지를 배울 수 있다면 나는 매우 기쁘다.
나는 나의 강연의 요점을 서면으로 공유하는 것이 도움이 될 것이라고 생각한다.나의 강연은 Vue의 관찰성과 반응성에 중심을 두었다.Vue 3은 탐색을 위한 새로운 영역을 열었습니다.들어가자.

Vue 2의 관찰성.x

new Vue({
  data() {
    return {
      foo: 'Vue'
    }
  }
})

새 Vue 구성 요소를 만들고 데이터 함수를 작성할 때 많은 고려를 하지 않았습니다.우리에게 있어서, 이것은 단지 우리의 구성 요소가 사용하는 일부 데이터일 뿐이다.그런데 엔진 뚜껑 아래에서 마법이 좀 생겼어요.Vue 데이터 객체의 모든 속성을 반복하고 관찰자를 설정합니다.이 관찰자들은 우리의 데이터를 관찰합니다. 데이터가 변할 때, 우리의 구성 요소를 다시 렌더링해야 한다는 것을 알려 줍니다.Vue 호출 알림 구성 요소가 관찰자의 메커니즘을 다시 보여줍니다.내부에서 그것의 실현은 대체로 다음과 같다.

// internally, something like this happens
for (let key in Object.keys(data)) {
  Object.defineProperty(this, key, {
    get() {
      addWatcherDependency(key)
      return data[key]
    },
    set(value) {
      markDirty(key)
      data[key] = value
    }
  })
}

Object.defineProperty 대상의 모든 속성에 Getter와 setter를 설정합니다. Getter는 추적할 의존항을 설정하고 setter는 속성이 변경되었음을 알립니다.어셈블리의 하위 트리가 데이터 객체의 속성에 의존하고 값이 변경되면 Vue는 해당 하위 트리를 다시 표시합니다.
비록 이런 방법은 이미 상당히 긴 시간 동안 운행되었지만, 그것은 확실히 한계가 있다.사람들이 관심을 가지는 주요 문제는 구성 요소를 만들 때 구성 요소가 접근할 모든 최고급 속성을 정의해야 한다는 것이다.Vue.set 중첩된 객체에 반응적으로 새 속성을 추가할 수 있지만 최상위 수준에서는 추가할 수 없습니다.비록 이 제한은 크지 않지만, 우리가 동적으로 속성을 추가하고 구성 요소를 인용할 수 있다면 다행이다.

Vue 2.6의 Vue.볼 수 있었어

Vue 2.6은 Vue의 내부 관측성 모듈을 Vue.observable 형태로 공개했다.본질적으로 말하자면, 이것은 구성 요소의 초기 데이터 함수의 결과를 통해 호출된 함수이다.이제 직접 액세스할 수 있으므로 간단한 다중 구성 요소 스토리지를 작성할 수 있습니다.또한 Vue 구성 요소의 렌더링 함수를 수동으로 작성하면 Vue.observable 반응성을 사용할 수 있습니다.다음 예제에서는 색상을 자주색이나 녹색으로 설정합니다.
이 두 구성 요소는 같은 데이터를 공유하여 서로의 색을 업데이트할 수 있다.

Vue 3의 반응성

Vue 3이 발사되면 어디서나 사용할 수 있는 완전히 독립된 반응성 모듈이 장착된다.프레임에 전혀 의존하지 않기 때문에, 자신의 전단 프레임워크를 작성하고 관찰성이 있다면, Vue의 프레임워크를 사용할 수 있으며, 직접 작성할 필요가 없습니다.기묘하게도, 그것은 낡은 관찰성 모듈의 모든 제한을 없앴다.이것은 ES6의 Proxy 대상으로 작성되었기 때문에 가능하다.실현은 약간 이렇게 보인다.

// internally, something like this happens
new Proxy(data, {
  get(obj, prop) {
    createWatcherDependency(prop)
    return obj[prop]
  },
  set(obj, prop, value) {
    markDirty(prop)
    obj[prop] = value
  }
})

Vue는 이제 새로운 속성을 추가하는 등 객체의 변경 사항을 감지할 수 있습니다.다음은 실행 중인 독립 실행형 모듈의 예입니다.

import { reactive, effect } from '@vue/reactivity'
const counter = reactive({ num: 0 })
let currentNumber
effect(() => {
  currentNumber = counter.num
})
console.log(currentNumber) // 0
counter.num++
console.log(currentNumber) // 1

이곳의 두 가지 관건은 reactive와 effect이다.객체가 변경될 때 효과를 트리거하도록 설정된 일반 객체를 reactive에 전달할 수 있습니다.우리가 effect 를 호출할 때, Vue는 우리가 부여한 함수가 num 의 counter 속성에 달려 있음을 기록합니다.13줄에서num을 바꾸면 효과가 다시 터치되고 currentNumber 변수가 업데이트됩니다.아마도 더 흥미로운 것은 우리가 언제 반응 대상에게 일상적인 방법을 사용했는지 알 수 있고 더욱 복잡한 변화를 이해할 수 있다는 것이다.

import { reactive, effect } from '@vue/reactivity'
const myMap = reactive({ foo: 1 })
let keys
effect(() => {
  keys = Object.keys(myMap)
})
console.log(keys) // [ 'foo' ]
myMap.bar = 2
console.log(keys) // [ 'foo', 'bar' ]

이 예에서는 Object.keys를 사용하여 객체의 키프레임을 가져옵니다.반응성 모듈은 우리가 사용했기 때문Object.keys을 알기 때문에 우리의 효과는 언제든지 새 열쇠를 추가하거나 제거할 때 촉발해야 한다.
단순히 말하자면, 이 모듈의 존재는 우리가 그것으로 어떤 새로운 일을 할 수 있느냐는 문제를 회피했다.물론 우리는 실시간 데이터 트리거 효과를 바탕으로 하는 상호작용 애니메이션을 제작할 수 있다.우리는 어떤 사건이 발생할 때 사용자에게 알릴 수 있는 알림 시스템을 구축할 수 있다.그런데 저희가 완전한 백엔드를 만들 수 있을까요?내가 그랬어.

Vue 백엔드

나는 간단한 급행열차를 설치했다.js 서버, 사용자 관리 프로그램에 사용되는 방법은 보통 다음과 같습니다.

POST /users
PATCH /users/:name
DELETE /users/:name

POST /superusers
DELETE /purge

POST /users 노선은 다음과 같다.

app.post('/users', (req, res) => {
  database.push(req.body)
  res.sendStatus(201)
})

놀라운 메모리 데이터베이스는 다음과 같습니다.

const { reactive } = require('@vue/reactivity')
module.exports = reactive([])

이것은 단순한 JavaScript 배열이며 수동적입니다.
그것의 현재 상태에서는 좀 지루하다.흥미로운 것은 우리가 데이터베이스에 등록한 일부 데이터가 변화할 때 촉발하는 효과이다.내 강연에서 나는 트위터라는 아주 재미있는 글을 썼다.

  tweet() {
    const record = database[database.length - 1]
    if (!record) return
    if (!record.silent) request.post(LAMBDA_URL, {
      json: {
        op: 'tweet',
        status: `${record.name} has joined the community!`
      }
    }, (error, response, body) => {
      record.tweetId = body.id_str
      console.log('Tweet sent with id', body.id_str)
    })
  },

이 효과는 데이터베이스에서 최신 항목을 찾아 AWS Lambda 함수에 요청을 보내 새 사용자가 커뮤니티에 가입했음을 트위터로 알립니다.트윗을 삭제하는 것이 매우 유행하기 때문에 우리는 사용자가 우리의 데이터베이스에서 삭제할 때 yeet효과가 하나 더 있다.

  yeet() {
    for (let record of database) {
      if (record && record.yeet && !record.yeeted) {
        request.post(LAMBDA_URL, {
          json: {
            op: 'yeet',
            tweetId: record.tweetId
          }
        }, (error, response, body) => {
          if (!error) {
            record.yeeted = true
            console.log(record.name, 'yeeted successfully.')
          }
        })
      }
    }
  },

간편한 등록

effect(tweet)
effect(yeet)

우리 시합 가야 돼!이것은 상당히 깔끔하다.이제 Vue는 데이터베이스에서 레코드를 추가하거나 삭제할 때마다 AWS Lambda 함수를 트리거합니다. 
나는 또 하나의 효과가 보여줄 만하다고 생각한다.다음 경로를 확인합니다POST /superusers.

app.post('/superusers', (req, res) => {
  const record = reactive(req.body)
  effect(initCreateSpreadsheet(record))
  database.push(record)
  res.sendStatus(201)
})

이 노선에 대해 나는 우리가 슈퍼 사용자가 생기면 그들이 로그인할 때 그들을 위해 정교하고 아름다운 전자 표를 만들어 주기를 희망할 것이라고 상상해 보았다.이 예에서 이것은 특정 기록을 등록하는 효과이다.당신은 이곳에서 이런 효과를 볼 수 있다.

  initCreateSpreadsheet(user) {
    return () => {
      if (user.online) {
        console.log('Generating spreadsheet...')
        setTimeout(() => console.log('Done.'), 4000)
      }
    }
  },

비록 우리가 이곳에서 어떤 것도 생성하지 않았지만, 우리는 당연히 할 수 있으며, 사용자의 online 로고가 진짜로 바뀌기만 하면 그것을 실행할 수 있다.내 프레젠테이션 프로그램에서 나는 두 개의 필터를 추가했는데, 그 중 하나는 첫 번째 필터에 잠겼다.이 점을 보려면 본 예시의 전체 원본 코드를 보십시오.
이것이 바로 나의 강연의 요점이다.Vue는 일반적으로 프런트엔드 프레임워크로 사용할 수 있지만 Vue 3은 백엔드 및 더 많은 분야에 새로운 가능성을 제공합니다.내가 여기서 나눈 것은 단지 몇 가지 예일 뿐이다.만약 당신이 이 게임을 하고 싶다면, 프레젠테이션 프로그램 here 의 원본 코드를 찾을 수 있습니다.