vue3 watch不生效_Vue3新特性详解

Vue3出来有一段时间了，作为明年金三银四的招聘旺季，这个绝对是必考项！加油，就是淦~

Vue3 的文档地址: https://v3.vuejs.org/

配置 vue3 开发环境

Vue cli

// 安装或者升级
npm install -g @vue/cli
# OR
yarn global add @vue/cli

// 保证 vue cli 版本在 4.5.0 以上
vue --version

// 创建项目
vue create my-project

然后的步骤

• Please pick a preset - 选择 Manually select features
• Check the features needed for your project - 多选择上 TypeScript，特别注意点空格是选择，点回车是下一步
• Choose a version of Vue.js that you want to start the project with - 选择 3.x (Preview)
• Use class-style component syntax - 输入 n，回车
• Use Babel alongside TypeScript - 输入n，回车
• Pick a linter / formatter config - 直接回车
• Pick additional lint features - 直接回车
• Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车
• Save this as a preset for future projects? - 输入n，回车

启动图形化界面创建

vue ui

项目结构和插件

Eslint 插件

如果 eslint 不生效，可以在根目录创建 .vscode 文件夹，然后在文件夹中创建 settings.json 然后输入

{
     
  "eslint.validate": [
    "typescript"
  ]
}

Vetur 插件

Ref

setup 方法

ref 函数

<h1>{
     {count}}h1><h1>{
     {double}}h1><button @click="increase">+1button>
</template>
import { ref, computed } from "vue"
setup() {
     
  // ref 是一个函数，它接受一个参数，返回的就是一个神奇的 响应式对象 。我们初始化的这个 0 作为参数包裹到这个对象中去，在未来可以检测到改变并作出对应的相应。
  const count = ref(0)
  const double = computed(() => {
     
    return count.value * 2
  })
  const increase = () => {
     
    count.value++
  }
  return {
     
    count,
    increase,
    double
  }
}

Reactive 函数

Reactive 函数

import {computed, reactive, toRefs} from 'vue'

interface DataProps {
     
  count: number;
  double: number;