网站建设属于哪个专业,营销的目的有哪些,深圳投资公司排名前十,电子商务网站建设的步骤一般vue3教程
//ps 这里是基本写法 一般项目不需要ref 因为需要一直return
这里是根据在不使用ts后缀 来在.vue里面写setup
如下图所示:setup
setup是启动页面会自动执行的一个函数
项目里定义的所有变量#xff0c;都要在setup当中
在setup定义的变量和方法#xff0c;都需要r…vue3教程
//ps 这里是基本写法 一般项目不需要ref 因为需要一直return
这里是根据在不使用ts后缀 来在.vue里面写setup
如下图所示:setup
setup是启动页面会自动执行的一个函数
项目里定义的所有变量都要在setup当中
在setup定义的变量和方法都需要return出去否则不能在视图当中使用!templatedivdiv{{ res}}/divdiv clickbtn点击/div/div
/templatescript
export default {
setup(){const res123/* 点击 */ // function btn(){//第一种用法// console.log(点击显示);//}const btn(){//第二种用法(推荐)console.log(点击显示);}console.log(res);return{res,btn}
}
}
/scriptstyle/style页面显示123
打印出来是 点击显示 123ref 组合式api 推荐: ref用来操作基本数据类型 数字 字符串
当ref值发生变化视图值会自动更新
ref可操作基本数据类型,也可操作复杂数据 (对象 数组)
推荐:
ref用来操作基本数据类型 数字 字符串为什么使用ref呢
使用ref包裹数据在数据修改会成为响应式状态。
ref发生变化时视图会自动更新!templatedivdiv{{ res}}/divdiv{{obj.name}}/divdiv v-for(item,index) in arr :keyindex{{item.name}}/divdiv clickbtn点击/div/div
/template
script
import {ref} from vue//组合式api
export default {
setup(){
const resref(123)
const objref({name:12121,age:18})
const arrref([{name:yang}])
const btn(){res.value343434;obj.value.name000000;arr.value[0].name999999;
}
return{res,btn,obj,arr}
}
}
/scriptstyle/style点击前页面显示
123
12121
yang点击后页面显示
343434
000000
999999PS推荐:
ref用来操作基本数据类型 数字 字符串reactive 定义普通数据类型不能用reactive 用ref reactive定义复杂的数据类型 比如数组 对象
reactive同样为我们的值创建了一个响应式应用 定义普通数据类型不能用reactive 用ref reactive定义复杂的数据类型 比如数组 对象 reactive 可响应深层次的数据 比如多维数组 返回应该响应式prory对象使用需要引入!templatedivdiv{{ obj.name}}/divdiv{{ obj.age}}/divdiv{{obj.arr[0].name}}/divdiv/divdiv clickbtn点击/div/div
/template
script
import {reactive} from vue//组合式api
// reactive用来处理数组 对象 复杂数据类型
// 不能直接处理基本的数据 num stringexport default {
setup(){
const name张三
const objreactive({name,age:18,sex:男,arr:[{name:王五}]
})
const btn(){// reactive改变值不需要加valueobj.name李四obj.name16obj.arr[0].name杨
}
return{btn,obj}
}
}
/scriptstyle/style点击前页面显示
张三
18
王五点击后页面显示
16
18
杨PS 定义普通数据类型不能用reactive 用ref reactive定义复杂的数据类型 比如数组 对象toRef 使用toRef是让js进行变化 页面视图不发生变化时进行使用 toRef也可以创建一个响应式数据ref本质是拷贝粘贴一份数据 脱离了原数据的交互ref函数将对象中的属性变成响应式数据 修改了响应式数据
但不会影响原数据 但是会更新视图层toRef函数本质是引用 修改了响应式数据
会影响原数据 但是不会更新视图层需要时引入
* 使用toRef是让js进行变化 页面视图不发生变化时进行使用!templatedivdiv{{res}}/divdiv{{obj.name}}/divdiv/divdiv clickbtn点击/div/div
/template
script
import {ref,toRef} from vue
export default {
setup(){
const name张三
const resref(name)//num string 是ref包裹的const obj{name:马云,age:50}
const res1toRef(obj,name)//这样是操作name值(toRef)
const btn(){console.log(res);res.value李四//使用ref改变值要加valueres1.value张三1111console.log(res1);
}
return{btn,obj,res,res1}
}
}
/scriptstyle/style使用ref包裹的基本数据(num string)值修改视图变化了
但是js打印还是原数据使用toRef包裹的数据值修改时在js里面打印的发生了变化
但是视图没有变化综上所述:
ref函数将对象中的属性变成响应式数据 修改了响应式数据
但不会影响原数据 但是会更新视图层toRef函数本质是引用 修改了响应式数据
会影响原数据 但是不会更新视图层toRefs
toRefs可以与其他响应式交互 更方便处理视图数据
主要作用是如下所示:用于批量设置多个数据为响应式数据
toRefs可以与其他响应式交互 更方便处理视图数据
需要时引入!templatedivdivulli{{name }}/lili{{age }}/lili{{ a }}/li/ul/divdiv clickbtn点击/div/div
/template
script
import { reactive,toRefs} from vue
export default {
setup(){
const newsreactive({name:张三,age:50,a:1})
const btn(){
}
return{btn,...toRefs(news)}
}
}
/scriptstyle/style主要作用是这个
如上所示:
一般我们定义需要写{{news.name}} {{news.age}}才会在视图显示
但是:
使用toRefs后我们...toRefs(XXX)
直接写{{name}} {{age}}即可computed
计算属性
与2一样 均用来监听数据的变化
使用时需引入:监听数据变化如下所示:
累加效果!templatedivdiva1input typenumber v-modela1/b1input typenumber v-modelb1/总和input typenumber v-modelsum //divdiv clickbtn点击/div/div
/template
script
import { reactive, computed, toRefs } from vue;
export default {setup() {const a1 const b1 const news reactive({ a1, b1 })// 计算属性使用(数字)const sumcomputed((){return news.a1 news.b1})// const btn () {};return { btn, ...toRefs(news),sum };},
};
/scriptstyle
/stylewatch
与2一样 用来侦听数据变化
使用时引入单个数据监听变化
//监听单个数据变化
!templatedivdiv{{num}}/divdiv clicknum点击/div/div
/template
script
import {ref, reactive, watch, toRefs } from vue;
export default {setup() {const num ref(0)// 监听watch变化// 监听点击数据发生变化watch(num,(newVa,oldVa){console.log(newVa,oldVa);})return { num};},
};
/scriptstyle
/stylePS 重点watch(,(newVa,oldVa){console.log(newVa,oldVa);},{immediate:true})},
{immediate:true}进入页面立即开启监听 默认为false多个数据监听变化
!templatedivdiv{{num}}----{{num1 }}/divdiv clicknum点击/div/div
/template
script
import {ref, reactive, watch, toRefs } from vue;
export default {setup() {const num ref(0)const num1ref(1)// 监听watch变化// 监听多个直接放在数组里面来监听watch([num,num1],(newVa,oldVa){console.log(newVa,oldVa);})return {num,num1};},
};
/scriptstyle
/stylePS 重点watch(,(newVa,oldVa){console.log(newVa,oldVa);},{immediate:true})},
{immediate:true}进入页面立即开启监听 默认为false监听整个reactive响应式数据变化 reactive(数组对象多维数组)定义 上一个数据是监听不到的 只能得到最新数据 !templatedivdiv{{num}}----{{num1.age.num}}/divdiv clicknum点击/divdiv clicknum1.age.num点击1/div/div
/template
script
import {ref, reactive, watch, toRefs } from vue;
export default {setup() {const num ref(0)const num1reactive({name:张三,age:{num:1}})// 监听整个reactive(数组对象多维数组)的数据变化// 只能监听最新结果 上一个数据是监听不到的watch(num1,(newVa,oldVa){console.log(newVa,oldVa);//newVa变化 oldVa不变化})return {num,num1};},
};
/scriptstyle
/stylePS 重点watch(,(newVa,oldVa){console.log(newVa,oldVa);},{immediate:true})},
{immediate:true}进入页面立即开启监听 默认为false监听某一个reactive的数据变化 reactive(数组对象多维数组)定义 监听某一个要用方法来写 如下所示 上一次与下一次结果都可以得到 !templatedivdiv{{num}}----{{num1.age.num}}/divdiv clicknum点击/divdiv clicknum1.age.num点击1/div/div
/template
script
import {ref, reactive, watch, toRefs } from vue;
export default {setup() {const num ref(0)const num1reactive({name:张三,age:{num:1}})// 监听某一个reactive(数组对象多维数组)的数据变化// 监听某一个要用方法这种来写watch(()num1.age.num,(newVa,oldVa){console.log(newVa,oldVa);},{immediate:true})//进入页面立即开启监听 默认为falsereturn {num,num1};},
};
/scriptstyle
/stylePS 重点watch(,(newVa,oldVa){console.log(newVa,oldVa);},{immediate:true})},
{immediate:true}进入页面立即开启监听 默认为falsewatchEffect watchEffect 侦听器 初始化就执行(相当于生命周期created)
watchEffect如果存在的话 在组件初始化当中就会执行一次并收集依赖watch可以获取到新值与旧值 而watchEffect是拿不到的watchEffect不需要指定监听的属性 会自动收集 只要我们在回调中引入了响应式属性
当这些属性变更时 这个回调都会执行 而watch只能监听指定属性而做出变更使用时引入:!templatedivdiv{{num}}----{{num1.age.num}}/divdiv clicknum点击/divdiv clicknum1.age.num点击1/div/div
/template
script
import {ref, reactive, watchEffect, toRefs } from vue;
export default {setup() {const num ref(0)const num1reactive({name:张三,age:{num:1}})const reswatchEffect((){console.log(111,初始化执行);const anum.valueconst bnum1.age.numconsole.log(a,33333);console.log(b,bbbbbbbb);})res()//停止监听(输入这个就点击停止监听)return {num,num1,res};},
};
/scriptstyle
/style页面在初始化开始执行以下操作
控制台输出:111 初始化执行
login.vue?4e59:15 0 33333
login.vue?4e59:16 1 bbbbbbbbshallowReative/shallowRef
遇到处理只有点击才会是处理
看点击的变化了解即可 shallowRef 只处理基本类型数据
shallowReative只处理第一层数据
使用时引入:shallowReative
点击自增name会变化
num不会变化
因为name是第一层数据( shallowReative只处理第一层数据)!templatedivdiv{{name}}/divdiv{{age.num}}/divdiv clickage.num点击/div/div
/template
script
import {shallowReactive,shallowRef, toRefs } from vue;
export default {setup() {const numshallowReactive({name:张三,age:{num:1}})return {...toRefs(num)};},
};
/scriptstyle
/style这里点击自增不会变化shallowRef
!templatedivdiv{{num}}/divdiv clicknum点击/div/div
/template
script
import {shallowReactive,shallowRef, toRefs } from vue;
export default {setup() {// shallowRef处理基本数据(num string)const numshallowRef(1)return {num};},
};
/scriptstyle
/style只处理基本数据(num string)
除了这二种数据类型其
他不能处理
这个仅仅只能处理shallowRef与ref区别是:shallowRef仅仅只能处理基本数据(num string)ref建议处理基本数据(num string )
组件传值(通信)
组件通信
vuex packpage.json里面看是否安装 如下所示 存储(传值)
ts有Pinia js有vuex第一步安装 cnpm i vuexnext --save需要时需引入 import {useStore} from vuex;
在这里插入代码片在这里插入代码片在这里插入代码片生命周期
Vue3的setup语法糖直接代替beforeCreateCreated
Destroy更名为Unmount其他就是直接加onbeforeCreate - 使用 setup() created - 使用 setup()beforeMount - onBeforeMount dom元素在内存中还未渲染到页面不可操作dommounted - onMounted dom已经渲染到页面能操作dom了beforeUpdate - onBeforeUpdate 数据更改后页面还未渲染updated - onUpdated 数据更改后页面渲染完成beforeDestroy - onBeforeUnmount 组件销毁之前destroyed - onUnmounted 组件销毁之后errorCaptured - onErrorCaptured (当事件处理程序或生命周期钩子抛出错误时调用)
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured,onRenderTracked,onRenderTriggered} from vue
onBeforeMount((){console.log(内存中有dom,还未渲染还不能操作dom)
})
onMounted((){console.log(dom结构已渲染到页面可以操作dom啦)
})
onBeforeUpdate((){console.log(数据变化后页面还未渲染)
})
onUpdated((){console.log(数据变化后页面已经渲染)
})
onBeforeUnmount((){ //组件的v-if可控制组件卸载console.log(组件卸载前)
})
onUnmounted((){console.log(组件卸载后)
})新增的钩子函数 onRenderTracked onRenderTriggered onRenderTracked直译过来就是状态跟踪它会跟踪页面上所有响应式变量和方法的状态也就是我们用return返回去的值它都会跟踪。只要页面有update的情况它就会跟踪然后生成一个event对象我们通过event对象来查找程序的问题所在。 onRenderTriggered直译过来是状态触发它不会跟踪每一个值而是给你变化值的信息 onRenderTracked((e){console.log(跟踪,e)
})
//调试钩子函数onRenderTracked,onRenderTriggered
onRenderTriggered((e){console.log(定位变化的,e)//参数能取到变化的属性信息
})抽离封装 简称封装罢了。。。。 a页面与b页面的内容包含同样的数据 我们需要把这个相同数据单独放在一个文件里面后缀.js文件 然后分别把这个文件在a页面 b页面进行引入使用即可 3中任何一个组合式api都可以尝试抽离出去在另一个文件
最后只需要回归到setup中即可抽离前
a页面与b页面的内容是一致的。a页面
!templatediv classmaindiv{{ name}}/divdiv{{ age}}/divdiv{{arr[0].name}}/divdiv/divdiv clickbtn点击/div/div/templatescriptimport {reactive,toRefs} from vueexport default {setup(){const name张三const objreactive({name,age:18,sex:男,arr:[{name:王五}]})const btn(){}return{btn,...toRefs(obj)}}}/scriptstyle scoped.main{background: rosybrown;}/styleb页面
!templatediv classmaindiv{{ name}}/divdiv{{ age}}/divdiv{{arr[0].name}}/divdiv/divdiv clickbtn点击/div/div/templatescriptimport {reactive,toRefs} from vueexport default {setup(){const name张三const objreactive({name,age:18,sex:男,arr:[{name:王五}]})const btn(){}return{btn,...toRefs(obj)}}}/scriptstyle scoped.main{background: rosybrown;}/style抽离后
a页面与b页面的内容是一致的把一致的内容单独放在public.js文件当中然后再把这个文件分别引入到a页面与b页面公共文件 public.js
import {reactive,toRefs} from vue
const pblic(){const name张三const objreactive({name,age:18,sex:男,arr:[{name:王五}]})return obj //返回值
}
export default pblica页面
!templatediv classmaindiv{{ name}}/divdiv{{ age}}/divdiv{{arr[0].name}}/divdiv/divdiv clickbtn点击/div/div/templatescriptimport {reactive,toRefs} from vue
import pblic from ../config/publicexport default {setup(){const objpblic()const btn(){obj.name2323232}return{btn,...toRefs(obj)}}}/scriptstyle scoped.main{background: rosybrown;}/styleb页面
!templatediv classmaindiv{{ name}}/divdiv{{ age}}/divdiv{{arr[0].name}}/divdiv/divdiv clickbtn点击/div/div/templatescriptimport {reactive,toRefs} from vue
import pblic from ../config/publicexport default {setup(){const objpblic()const btn(){obj.name2323232}return{btn,...toRefs(obj)}}}/scriptstyle scoped.main{background: rosybrown;}/style
