vue3.0 01 项目的创建与setup组合式写法的基本使用 watch与watchEffect基本用法

1. 项目创建

这里先使用vuecli创建项目 ，关于使用vite创建项目之后再总结
检查vue版本状态 【vue -V 】 vuecli存在的话会在这行命令执行之后返回给你当前脚手架的版本号， 如果没有返回值则需要去安装vuecli ：【npm install --global vue-cli】
使用vuecli搭建脚手架====》 【vue create 项目名称 】 这里直接选择vue3 eslint的关闭很好操作，下面会演示

2. 创建基本页面

修改初始化项目中的hello.vue文件作为模板

===》 如果你对于eslint的语法限制不是很熟悉，那么强烈建议你手动关闭这个语法检测工具
关闭流程：1. 找到你的 vue.config.js文件，2. 在这个文件下使用 lintOnSave: false,手动关闭

3.模拟加减的开发场景 ref的使用,watch的使用,方法的基本格式

导入 ref 包装数据 【在vue3.0的setup中没有2.0中的this的概念，这里我们使用ref包装基本数据类型，让num成为一个双向绑定数据】
import { ref, watch } from “vue”;

======================================

watch导入后的基本使用：

    / 使用vue3.0中的watch对数据进行监听  让num的值不要小于0     ==注意watch位置,不要位于响应数据之前==
    watch(num, (v) => {
      if (v < 0) {
        num.value = 0;
      }
    });
1
2
3
4
5
6

ref包裹基本数据类型使其成为动态响应数据：

 let num = ref(2);     //  ref括号中就是基本类型数据的值
1

方法的创建

    // 使用num.value在方法中进行数据的修改
    let add = () => {
      num.value++;
    };
    let jian = () => {
      num.value--;
    };
1
2
3
4
5
6
7

注意： 在页面的结尾部分需要对setup中的 数据与方法进行return

return { num, add, jian };
1

4. 完整单页面源码

<template>
  <div class="hello">
    <h1>练习vue3.0的写法</h1>
    <button @click="jian()">-</button>{{ num }}<button @click="add()">+</button>
  </div>
</template>

<script>
// 基本数据类型需要被ref包裹处理
import { ref, watch } from "vue";
export default {
  // 使用setup组合式的写法创建数据
  setup() {
    

    // 使用num.value在方法中进行数据的修改
    let add = () => {
      num.value++;
    };
    let jian = () => {
      num.value--;
    };

    let num = ref(2);

    // 使用vue3.0中的watch对数据进行监听  让num的值不要小于0     ==注意watch位置,不要位于双向数据之前==
    watch(num, (v) => {
      if (v < 0) {
        num.value = 0;
      }
    });

    return { num, add, jian };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

5. 补充：watchEffect的基础使用：

1. watchEffect也能够用来进行数据的响应检测，当 watchEffect 中被定义了响应式数据的时候那么其中的方法就能够被执行

    // 使用watchEffect进行数据监听
    watchEffect(()=>{
      // watchEffect中只要使用到了响应式数据那么就能够被执行
      if(num.value<0){
        num.value=0
      }
    })
1
2
3
4
5
6
7

2. 在watchEffect中有对应的方法能够将watchEffect监听失效

    // 使用watchEffect进行数据监听
    let stop = watchEffect(() => {
      // watchEffect中只要使用到了响应式数据那么就能够被执行
      if (num.value < 0) {
        num.value = 0;
      }
    });
    stop();
1
2
3
4
5
6
7
8