v2和v3的区别

2.vue3里面的setup和正常写data,methods有什么关系呢.就是能不能一起写.如果冲突了,以谁为主.data,methods这些配置项能不能读取setup里面的东西.setup能不能读取配置项的数据.

答案:data和methods可以和setup同时存在.vue3里面本身是可以写vue2的东西.

data里面可以读取到setup里面的数据.

setup里面无法读取data里面的数据.

 

注意reactive定义的对象不可以整体修改.

ref包裹对象可以直接.value去修改整个对象.但是reative包裹的对象.不同直接修改整个对象.要用object.asign(obj,newobj)去修改

1.computed是只读的,如果想修改要用const newnum = computed({get(){},set(){}})这样的写法,用const newnum = computed(()=> {})是无法做到修改computed的值

2.watch可以监听ref.reative.getter函数返回的一个值.还可以监视这些类型返回的一个数组 .

如何监听ref控制的简单数据类型

const num = ref(0)
1 const stop = watch(num, (newval, oldval) => {
2   if (newval === 5) {
3     stop();
4   }
5 });

watch监听ref控制的对象类型,那他监视的是对象的地址值.如果没有深度监听,只是单纯修改对象的属性.watch还监视不到.除非修改了整个对象.那就可以监视到.如果想修改属性的时候也监视到就要手动开启深度监听

 1 let person = ref({
 2   name: '张三',
 3   age: 18,
 4 });
 5 function changename() {
 6   person.value.name += '*';
 7 }
 8 function changeage() {
 9   person.value.age += 1;
10 }
11 function changeperson() {
12   person.value = {
13     name: '王五',
14     age: 22,
15   };
16 }
17 
18 watch(
19   person,
20   () => {
21     console.log(person)
22   }, {
23   deep: true,(手动开启深度监听)
24   immediate: true,(一上来就先执行一下)
25 }
26 );

 watch监听reative定义的对象类型,他不用写深度监听.他是默认开启深度监听的,且这个深度监视是不可以关闭的,如果修改对象里面的属性.地址值没变.所有不管是ref监听的.还是reatvie监听的对象.newval.oldval都是一样的

let person = reactive({
  name: '张三',
  age: 18,
});
let obj = reactive({
  a: {
    b: {
      c: 'hello',
    },
  },
});
function changename() {
  person.name += '*';
}
function changeage() {
  person.age += 1;
}
function changeperson() {
  console.log(person)
  person = {
    name: '李四',
    age: 20,
  };
  console.log(person)
}

function testobj() {
  obj.a.b.c += '*';
}

watch(
  person,
  (newval, oldval) => {
    console.log(newval)
    console.log(oldval)
  }, {
}
);

watch(
  obj,
  (newval, oldval) => {
    console.log('obj修改了 ')
    console.log(newval)
    console.log(oldval)
  },
);

watch监视ref.或者reative定义的对象类型的某个属性.

(监视响应式对象的某个属性.且该属性是基本类型)

 

let person = reactive({
  name: '张三',
  age: 18,
  car: {
    c1: '宝马',
    c2: '奔驰'
  }
})

watch(() => { return person.name }, (newVal, oldVal) => {
  console.log('person发生了变化', newVal, oldVal)
}, { deep: true })
</script>

如果是监听响应对象里面的对象

let person = reactive({
  name: '张三',
  age: 18,
  car: {
    c1: '宝马',
    c2: '奔驰'
  }
})
function changeName() {
  person.name += '*'
}
function changeAge() {
  person.age = 20
}
function changeCar1() {
  person.car.c1 = '比亚迪'

}
function changeCar2() {
  person.car.c2 = '五菱'
}
function changeCar() {
  person.car = {
    c1: '雅迪',
    c2: '小牛'
  }
}

watch(person.car, (newVal, oldVal) => {
  console.log('name changed:', newVal, oldVal)
})
注意这里修改car.c1和car.c2都有变化.但是修改整个car却没有变化

所以因为有这个问题存在.所以如果监听响应式对象里面的对象.建议用函数的写法,而且deep:true一定要带上.以后就直接这样写

let person = reactive({
  name: '张三',
  age: 18,
  car: {
    c1: '宝马',
    c2: '奔驰'
  }
})
function changeName() {
  person.name += '*'
}
function changeAge() {
  person.age = 20
}
function changeCar1() {
  person.car.c1 = '比亚迪'

}
function changeCar2() {
  person.car.c2 = '五菱'
}
function changeCar() {
  person.car = {
    c1: '雅迪',
    c2: '小牛'
  }
}

watch(() => person.car, (newVal, oldVal) => {
  console.log('car changed:', newVal, oldVal)
}, { deep: true })

所以person.car监听的话.可以直接写.但是监听不到整个对象的变化.也可以写函数.更推荐直接写函数的写法.加上deep:true

监听响应式对象里面的多个属性.可能有简单数据.也可能是对象类型

let person = reactive({
  name: '张三',
  age: 18,
  car: {
    c1: '宝马',
    c2: '奔驰'
  }
})
function changeName() {
  person.name += '*'
}
function changeAge() {
  person.age = 20
}
function changeCar1() {
  person.car.c1 = '比亚迪'

}
function changeCar2() {
  person.car.c2 = '五菱'
}
function changeCar() {
  person.car = {
    c1: '雅迪',
    c2: '小牛'
  }
}

watch([() => person.name, () => person.car.c1, () => person.car.c2], (newVal, oldVal) => {
  console.log('name changed:', newVal, oldVal)
})

watch和watchEffect的区别

watch需要明确的告诉他.我需要监视谁.但是watchEffect不用明确的告诉他,一上来就要执行一次.就是watchEffect加了立即监视全自动监视 ,他会自动看里面的判断,不用一个一个写watch.

let temp = ref(0)
let waterHeight = ref(0)


function changetemp() {
  temp.value += 10
}

function changeWaterHeight() {
  waterHeight.value += 10
}
watchEffect(() => {
  if (temp.value > 100 || waterHeight.value > 100) {
    console.log('可以了.可以停止加温或者加水了')
  }
})

 

ref的使用,当前页面的ref可以拿到这个dom元素.如果是父组件要拿到子组件的示例.就在子组件标签上写上ref.但是一般拿不到子组件的数据.需要子组件用deineExpose.来暴露出来,暴露出来父组件才能看

 ts的使用.要定义一个interface 暴露出去.分别是默认暴露.分别暴露.统一暴露.interface 是一个规范一个类型.

先定义一个规则

export  interface PersonInter {
  id: string,
  name: string,
  age: number,
  sing:object
}

使用的时候

import { ref } from 'vue';
import { type PersonInter } from '../types/index';
// 这样写法是说明.这个对象的类型是PersonInter,要符合PersonInter的规范
const persondata: PersonInter = {
  id: '001',
  name: '张三',
  age: 18,
  sing: {
    name: '歌唱祖国',
  }
};
// 这样写法是说明.这个personlistArr是数组且数组里面每一项要符合PersonInter的规范
const personlistArr: Array<PersonInter> = [{
  id: '001',
  name: '张三',
  age: 18,
  sing: {
    name: '歌唱祖国',
  },
}, {
  id: '001',
  name: '张三',
  age: 18,
  sing: {
    name: '歌唱祖国',
  }
}]

当然这样写感觉页面有些臃肿.可以换一种方便的写法.

export  interface PersonInter {
  id: string,
  name: string,
  age: number,
  sing:object
}
export type personType =Array<PersonInter>     //也可以写成PersonInter[] 把这个类型继续使用起来然后导出

使用的时候

import { type PersonInter, type personType } from '../types/index';
// 这样写法是说明.这个对象的类型是PersonInter,要符合PersonInter的规范
const persondata: PersonInter = {
  id: '001',
  name: '张三',
  age: 18,
  sing: {
    name: '歌唱祖国',
  }
};
// 这里就可以直接用personType.而不是Array<PersonInter>
const personlistArr: personType = [{
  id: '001',
  name: '张三',
  age: 18,
  sing: {
    name: '歌唱祖国',
  },
}, {
  id: '001',
  name: '张三',
  age: 18,
  sing: {
    name: '歌唱祖国',
  }
}]

props的使用.父向子传值.且添加校验

 路由的query传递和获取

 

 路由的params传参(第一种写法)

 

 

  路由的params传参(第二 种写法)

 路由规则的props参数第一种写法

 路由规则的props传递.第二种写法

 编程式路由

 pinia的使用

 pinia里面如果修改store里面的数据

 pinia里面的storetorefs的用法,(不要用torefs这个方法去解构store里面的数据)

 pinia里面getters的用法 (可以接state这个参数.也可以直接用this.如果用this的写法就不能换成箭头函数的写法了.)

 pinia里面getter也可以用箭头函数的写法

 pinia里面如何取getter的数据