v3.2 核心 回调函数，计算属性，侦听属性， 响应式数据

1.响应式数据

    <h2>{{ number }}</h2>
    <h4>{{ fn.num1 }}</h4>
// 不需要deta 
let number = ref(18);//ref创建单个响应式数据nimber.value才是数据
// reactive 创建一个响应式数据对象
let fn = reactive({
  num1: 3,
  name: '王麻子',
  age: 29,
  sex: '男'
  ......
});

2.回调函数

<button @click="onTwo">按钮</button>
// 不需要 methods 对象来包裹回调函数
const onTwo = () => {
  fn.num1++
  number.value += 10;
};

3.计算属性 computed

<h4>{{ numTwo2 }}</h4>
// 不需要computed 对象进行包裹
let numTwo = computed(() => {
  // 响应式数据变量 number 改变 numTwo2是他的2倍
  return number.value * 2;
});

4.侦听属性 watch

// watch() 函数中有3 个参数 第一个是需要侦听的变量，第二个是侦听回调函数
// 第三个是一个可选对象{immediate: true} 是否立即侦听 deep: true在v3中无效了
watch(
  // 如果需要同时侦听多个变量 第一个参数就写为数组，数组中写入侦听的变量
  // 如果需要深度侦听一个对象第一个参数写为函数返回的形式如下
  [() => user.name, number],
  // x 表示的是新值，y表示是旧值
  (x, y) => {
    console.log(x, y);
    console.log('触发侦听');
  },
  // 第一个参数如果是函数返回变量自动开启深度侦听模式 deep: true 在v3 中无效了
  // immediate: true 表示 直接开始侦听 
  { immediate: true, deep: true }
);
};