前端框架-vue

· 770 words · 2 minute read

vue3 🔗

vite 🔗

vite 是 vue3 的构建工具。使用 ES Module 导入来提供代码，不使用 webpack 工具。

webpack 的工作流程

  • 读取webpack.config.js 配置
  • 解析 entry 指定的入口文件，分析代码中的模块依赖

  • 使用 loaders 转换代码。（如 typescript 转为 javascript， sass 转为 css） 🔗

  • 使用 plugins 进行额外优化（压缩代码，生产 html 文件） 🔗

  • 将最后的 js，css，html 代码输出到 dist 目录中

创建第一个 vite 项目 🔗

npm init vue@latest

npm create vite@latest cd project && npm instasll && npm run dev
http://localhost:3000

🔗

npm init -y , npm i @solana/web3.js

遇到的问题 🔗

启元前端 🔗

prettier ESlint 有交集，有冲突的部分。

在该 vue 模版时，vs code 里按了 tab 键，被 prettier 爆出错误如下。 Delete · prettier/prettier

error Delete ␍ prettier/prettier 把相关文件放到 ignore 中，忽略检查。

vue 🔗

redner 自定义组件时无法显示。

img src 相对路径不生效，绝对路径可以。

ES6 module 🔗

Module ‘“xx.vue“‘ has no default export.Vetur(1192) 选择卸载 vetur，安装 volar 插件

封装自定义指令 🔗

directive函数

import createApp from "vue";
import App from "./App.vue";

const app = createApp(App);
// 指令名称是 highlight，
app.directive("highlight", {
  // 在哪个阶段的生命周期中执行 指令函数。
  mounted(el, binding) {
    el.style.backgroundColor = binding.value || "red";
  },
});

// <p v-highlight> xyz </p>

自定义指令的修饰符 🔗

app.directive("highlight", {
  mounted: function(el, binding) {
    if (binding.modifiers.delay) {
      setTimeout( ()=> {
        el.style.backgroundColor = binding.value || "yellow";
      })
    } else
      el.style.backgroundColor = binding.value || "yellow";
    }
  },
})

<p v-highlight.delay="lightblue">xyz</p>

v-model 如何实现父子组件的通信 🔗

通过 v-bind， 也就是:符号。

<template>
  <p>父组件{{ param1 }}</p>
  <p>父组件{{ param2 }}</p>
  <Child v-model:p1="param1" v-model:p2="param2"></Child>
</template>

<script setup>
import Child from "./Child.vue";
import { ref } from "vue";

const param1 = ref("x");
const param2 = ref("y");
</script>

<script>
const emit = defineEmits(["update:p1", "upate:p2"]);
const updateP1 = () => {
  emit("update:p1", "xx");
}
const updateP2 = () => {
  emit(update:p2, "yy");
}
</script>

双向绑定 🔗

框架 数据 → 视图 视图 → 数据 实现方式
Vue2 Object.defineProperty input 事件监听 自动
Vue3 Proxy input 事件监听 自动
Angular Zone + 脏检查 表单指令 自动
React state 重渲染 onChange 手动同步 手动 
<div id="app">
  <input id="input" />
  <p id="display"></p>
</div>

<script>
  const obj = {};
  const input = document.getElementById("input");
  const display = document.getElementById("display");

  Object.defineProperty(obj, "text", {
    get() {
      return this._text;
    },
    set(v) {
      this._text = v;
      display.textContent = v;
      input.value = v;
    },
  });

  input.addEventListener("input", (e) => {
    obj.text = e.target.value;
  });

  obj.text = "Hello 双向绑定";
</script>

vue 与 react 的对比 🔗

vue 双向绑定， react 单向数据流。

前端