Vue3相关摘要

基于 vite 创建

npm create vue@latest

/**
 * 官方推荐的插件
 * TypeScript Vue Plugin (Volar) // Auto Insert: Dot Value (自动添加.value)
 * Vue - Official
 */
.vscode/extensions.json  recommendations

.gitignore
env.d.ts                                 // 让 ts 识别引入的文件
index.html                               // 入口文件
package-lock.json
package.json
tsconfig.app.json                        // ts 配置文件
tsconfig.json                            // ts 配置文件
tsconfig.node.json                       // ts 配置文件
vite.config.ts                           // 配置文件，可以配置 插件、代理

极简插件（可以下载 chrome 插件）

Options API

<script lang="ts">
import Person from './components/Person.vue';

export default {
  name: 'App',            // 组件名
  components: { Person }, // 注册组件
  data() {
    return {};
  },
  methods: {},
  computed: {},
  watch: {},
};
</script>

Composition API

<script lang="ts">
import Person from './components/Person.vue';

export default {
  name: 'App',                   // 组件名
  components: { Person },        // 注册组件

  // setup 比 beforeCreate 早
  // setup 可以和 Options API 共存
  setup() {
    let name = 'zhangsan';       // 不是响应式
    function changeName() {
      name = 'lisi';             // 注意：这样修改name，页面是没有变化的
    }
    return { name, changeName }; // setup return 对象，模板需要使用的数据
    // return ()=>'content'      // setup return 一个渲染函数（返回值渲染在页面上）
  },
  data() {
    return {
      data_name: this.name, // Options API data 可以读到 setup 中数据，反之不可以
    };
  },
  beforeCreate() { },
};
</script>

setup 语法糖

<script lang="ts" setup name="App">// name 插件支持
import { ref, reactive } from 'vue';
import Person from './components/Person.vue';
 
/* code */

</script>

/**
 * 支持 name="App" 需要添加插件
 * npm i vite-plugin-vue-setup-extend -D
 */

// vite.config.ts 加入插件
import VueSetupExtend from 'vite-plugin-vue-setup-extend';

export default defineConfig({
  plugins: [
    VueSetupExtend()
  ]
})

ref, reactive

import { ref, reactive } from 'vue';

/**
 * ref 可以定义 基本类型、对象类型的响应式数据
 * 若需要一个响应式对象，层级不深，`ref`、`reactive`都可以。
 */
let name = 'zhangsan'; // 不是响应式
let age = ref(18);     // 响应式
function changeAge() {
  age.value += 1;
}
let car = ref({ brand: '奔驰', price: 100 });
function changePrice() {
  car.value.price += 10;
  car.value = { brand: '奥拓', price: 1 }; // 是可以更新的
}

/**
 * reactive 只能定义 对象类型的响应式数据
 * 深层次响应式 obj, array。
 * 若需要一个响应式对象，且层级较深，推荐使用`reactive`。
 * reactive 重新分配一个新对象，会 失去响应式（可以使用 Object.assign 去整体替换）
 */
let games = reactive([
  { id: 'aysdytfsatr01', name: '王者荣耀' }
]);
function changeFirstGame() {
  games[0].name = '流星蝴蝶剑';
}

toRefs, toRed

import { reactive, toRefs, toRed } from 'vue';

/**
 * toRefs 从响应式对象中解构的变量是 ref 类型，是响应式的
 * toRef 返回值是响应式的
 */
let person = reactive({
  name: '张三',
  age: 18,
});
let { name, age } = toRefs(person);
let age = toRef(person, 'age');

computed

import { ref, computed } from 'vue';
let firstName = ref('zhang')
let lastName = ref('san')

/**
 * computed 可以是只读的，或者 可读可写
 */
let fullName1 = computed(() => {
  return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value;
});

let fullName2 = computed({
  get() {
    return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value;
  },
  set(val) {
    const [str1, str2] = val.split('-');
    firstName.value = str1;
    lastName.value = str2;
  },
});
function changeFullName() {
  fullName.value = 'li-si'; // firstName lastName 将更新
}

watch

import { ref, watch } from 'vue';

/**
 * watch 只能监视以下 四种数据
 * 1. ref 定义的数据（基本类型、对象类型）
 * 2. reactive 定义的数据
 * 3. 函数返回一个值（ getter 函数）
 * 4. 一个包含上述内容的数组
 */

// 监视【ref】定义的【基本类型】数据
let sum = ref(0);
const stopWatch = watch(sum, (new, old) => {
  if (new >= 10) stopWatch(); // 可以关闭监控
});


// 监视【ref】定义的【对象类型】数据，监视的是【对象地址值】
// 若想监视对象内部属性的变化，需要手动开启深度监视
let person = ref({ name:'张三', age:18 });
watch(person, (new, old) => { ... }, { deep: true }); // 配置对象（deep, immediate...）


// 监视【reactive】定义的【对象类型】数据，且默认是开启深度监视的
let person = reactive({
  name: '张三',
  car: { c1: '奔驰', c2: '宝马', },
});
watch(person, (new, old) => { ... });


// 监视【ref】或【reactive】定义的【对象类型】数据中的【某个属性】
watch(() => person.name, () => { ... });                  // 1. 基本类型属性，写函数式
watch(      person.car,  () => { ... });                  // 2-1 对象类型属性，写对象（监视对象属性值变化）
watch(() => person.car,  () => { ... });                  // 2-2 对象类型属性，写函数式（监视对象地址值变化）
watch(() => person.car,  () => { ... }, { deep: true });  // 2-3 对象类型属性，写函数式 + deep（监听【地址值 + 属性值】变化），推荐


// 监视多个数据
watch(
  [() => person.name, person.car],
  (new, old) => { ... }, // new 数组, old 数组
  { deep: true }
);