好品质高端网站设计推荐网站建设 搞笑笑话

当前位置： 首页 > news >正文

好品质高端网站设计推荐,网站建设 搞笑笑话,互联网o2o是什么意思,中英文企业网站php源码简介 Vue3 最大的一个变动应该就是推出了 CompositionAPI#xff0c;可以说它受ReactHook 启发而来#xff1b;它我们编写逻辑更灵活#xff0c;便于提取公共逻辑#xff0c;代码的复用率得到了提高#xff0c;也不用再使用 mixin 担心命名冲突的问题。 ref 与 reactive…简介 Vue3 最大的一个变动应该就是推出了 CompositionAPI可以说它受ReactHook 启发而来它我们编写逻辑更灵活便于提取公共逻辑代码的复用率得到了提高也不用再使用 mixin 担心命名冲突的问题。 ref 与 reactive 是 Vue3 新推出的主要 API 之一它们主要用于响应式数据的创建。 reactive 能做的ref 都能胜任并且 ref 底层还是使用 reactive 来做的!!! ref 函数可以接收原始数据类型与引用数据类型 reactive 函数只能接收引用数据类型。 当你明确知道需要包裹的是一个对象那么推荐使用 reactive其他情况使用 ref 即可 reactive包装函数 templatediv!– 案列1 –button clickmyClick点我/buttondiv{{ obj.name }}–{{ obj.age }}/divdiv{{ obj2.email }}/div!– div{{ obj3 }}/div –hr!– 列表案列 –ulli v-foritem in obj.datalist :keyitem{{ item }}/li/ul!– 模糊查询案列 –input typetext v-modelobj.mytitleulli v-foritem in GetSelectItems() :keyitem{{ item }}/li/ul/div /template script import { reactive } from vue; export default {setup() {//用reactive是一个包装函数包装后就得到了一个响应式对象obj (setup中可以存在多个reactive只是正常情况下一个就够用了比如下面的obj 和obj2)//注意const是申明常量的常量不是不可变的吗为什么还可以通过obj.name 李四来改变它呢 //其实obj只是reactive({name: 张三,age: 29})这个对象的一个引用(指针)obj不能再进行修改只是说obj不能再指向其他的对象了例如:objaaa就会报错因为obj所指向对象的引用已经变化了。//但是obj指向的这个对象它本身的属性是可以修改的,所以 obj.name 李四不会报错const obj reactive({name: 张三,age: 29,datalist: [aaa, bbb, ccc],mytitle: })const obj2 reactive({ email: abcqq.com })//const obj3reactive(张三); //reactive不支持这种简单类型的包装它只支持复杂类型的包装如对象数组等。//const obj3reactive(); //reactive不支持这种简单类型的包装//const obj3reactive(1); //reactive不支持这种简单类型的包装const myClick () {obj.name 李四}const GetSelectItems () {//includes() 方法用于判断字符串是否包含指定的子字符串//filter方法是过滤方法 item表示当前遍历datalist数组的项如果当前项包含了input中输入的值则找出来然后统一返回一个数组var selectIitemArr obj.datalist.filter(item item.includes(obj.mytitle))return selectIitemArr;}//所有的函数与对象都需要在return中进行返回//objmyClick是定义在setup中的它只能在setup中使用为了在setup外面使用(例如DOM中)我们就必须要把他们暴露出去就需要放到return中进行返回return {obj, //等同于obj:objobj2,obj3,myClick, //返回myClickGetSelectItems,}} }/script ref包装函数 templatediv!– 案列1 –button clickmyClick点我/buttondiv{{ obj.name }}–{{ obj.age }}/divdiv{{ obj2.email }}/divdiv{{ obj3 }}/divdiv{{ obj4 }}/divdiv{{ obj5 }}/divdiv{{ obj6?中国:美国 }}/divhr!– 列表案列 –ulli v-foritem in obj.datalist :keyitem{{ item }}/li/ul!– 模糊查询案列 –input typetext v-modelobj.mytitleulli v-foritem in GetSelectItems() :keyitem{{ item }}/li/ul/div /template script import { reactive, ref } from vue; export default {setup() {//用reactive是一个包装函数包装后就得到了一个响应式对象obj (setup中可以存在多个reactive只是正常情况下一个就够用了比如下面的obj 和obj2)//注意const是申明常量的常量不是不可变的吗为什么还可以通过obj.name 李四来改变它呢 //其实obj只是ref({name: 张三,age: 29})这个对象的一个引用(指针)obj不能再进行修改只是说obj不能再指向其他的对象了例如:objaaa就会报错因为obj所指向对象的引用已经变化了。//但是obj指向的这个对象它本身的属性是可以修改的,所以 obj.value.name 李四不会报错const obj ref({name: 张三,age: 29,datalist: [aaa, bbb, ccc],mytitle: })const obj2 ref({ email: abcqq.com })const obj3ref(王五); //ref支持这种简单类型的包装 原理就是new Proxy({value:王五}) 注意在DOM模板中使用{{obj3}} 在script中使用需要在后面加.value 如obj3.valueconst obj4ref(); //ref支持这种简单类型的包装 原理就是new Proxy({value:})const obj5ref(1); //ref支持这种简单类型的包装 原理就是new Proxy({value:1})const obj6ref(true);const myClick () {obj.value.name 李四}const GetSelectItems () {//特别注意经过ref包装函数包装的对象在script中必须要在对象名称后面.value 在DOM模板中则不需要.value// 比如:// obj.value.name; 获取obj对象中的name值// obj.value.age; 获取obj对象中的age值// obj.value.datalist; 获取obj对象中的datalist值// obj.value.mytitle; 获取obj对象中的mytitle值//includes() 方法用于判断字符串是否包含指定的子字符串//filter方法是过滤方法 item表示当前遍历datalist数组的项如果当前项包含了input中输入的值则找出来然后统一返回一个数组var selectIitemArr obj.value.datalist.filter(item item.includes(obj.value.mytitle))return selectIitemArr;}//所有的函数与对象都需要在return中进行返回//objmyClick是定义在setup中的它只能在setup中使用为了在setup外面使用(例如DOM中)我们就必须要把他们暴露出去就需要放到return中进行返回return {obj, //等同于obj:objobj2,obj3,obj4,obj5,obj6,myClick, //返回myClickGetSelectItems,}} }/script reactive与ref共存 templatediv!– 案列1 –button clickmyClick点我/buttondiv{{ obj.name }}–{{ obj.age }}/divdiv{{ obj2.email }}/divhr!– 可以直接用mydata –ulli v-foritem in mydata :keyitem{{ item }}/li/ul!– 也可以将mydata放到reactive包装函数中然后通过obj对象来用 –ulli v-foritem in obj.mydata :keyitem{{ item }}/li/ululli v-foritem in mylist.mydata :keyitem{{ item }}/li/uldiv{{mylist.obj.name}}/div/div /template script import { reactive, ref } from vue; export default {setup() {//有一种情况就是通过import导入的组件(JS)中存在用ref包装的而我们当前组件组件用的是reactive包装的为了保持风格统一(当然不统一也行)我们也可以将ref中的包装对象直接放到reactive包装函数中//举列const mydata ref([1, 2, 3]);//我们可以直接用mydata也可以将mydata放到reactive包装函数中const obj reactive({name: 张三,age: 29,datalist: [aaa, bbb, ccc],mytitle: ,mydata //也可以将ref包装函数包装的对象mydata放到reactive包装函数中})const mylistref({mydata, obj //也可以将reactive包装函数包装的对象obj放到ref包装函数中})const obj2 reactive({ email: abcqq.com })return {obj, //等同于obj:objobj2,mydata,mylist}} } /script