Artikel ini akan meringkaskan dan berkongsi dengan anda beberapa soalan asas temu duga bahagian hadapan tentang Vue Ia akan memperkenalkan kaedah pemindahan nilai Vue, vuex, pengkapsulan komponen, dll. Aspek ini biasanya digunakan dalam kerja kami dan sering ditanya oleh. soalan penemuduga, harap ia membantu semua orang!
Nilai ibu bapa-anak passing Gunakan props untuk menerima
Anak dan bapa lulus nilai . $bas pemindahan stesen
Jika hubungan antara komponen sangat jauh, ia adalah nilai yang perlu digunakan oleh banyak komponen
vuexmenyediakan, menyuntik kaedah suntikan
[Cadangan berkaitan: "
tutorial vue.jsRingkasnya, datanya serupa dengan pembolehubah global dan boleh digunakan dalam mana-mana komponen Gunakan vuex dalam projek
1. Muat turun pakej vuex dan importnya 🎜>
2 Anda perlu menulis data global denganimport Vuex from 'vuex' Vue.use(Vuex)
// store
new Vuex.Store({
state: {
count:1 //这个count 就是全局的数据
},
mutations: {
},
actions: {
}
})new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')<template>
<div class="home">
<!-- home啊
<hr>
{{$store.state.m1.m1Name}}
<button @click="add">点击</button> -->
<!-- <hr> -->
<!-- <my-swiper :list="list"></my-swiper> -->
<button @click="getAll">发送请求</button>
home组件啊
<hr>
<h1>count的值:{{$store.state.count}}</h1>
<button @click="addCount">让全局count+1</button>
<hr>
<h2>m1下的全局数据 {{$store.state.m1.m1Name}} </h2>
<button @click="add">点击修改某个模块的数据</button>
<!-- 3 哪个组件要用 就直接 使用注册的组件标签名 -->
<hr>
<!-- 用组件 传了list数据进去 -->
<my-swiper :list="list"></my-swiper>
</div>
</template>
<script>
// 要在组件使用全局数据
// 1 在html范围 直接 $store.state.名字
// 2 在js范围 this.$store.state.名字
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import { mapMutations , mapActions ,mapState } from 'vuex'
export default {
name: 'Home',
components: {
// HelloWorld
},
data(){
return {
list:[
{id:1,src:'http://122.51.238.153/images/1.jpg'},
{id:2,src:'http://122.51.238.153/images/2.jpg'},
{id:3,src:'http://122.51.238.153/images/3.jpg'},
{id:4,src:'http://122.51.238.153/images/4.jpg'}
]
}
},
created(){
console.log('created')
console.log('store',this.$store)
},
mounted(){
console.log("home 的 mounted")
},
methods:{
// 这句话的意思是 直接 解构出 全局 m1模块下的 loginMutation
// 把loginMutation 放到this上 并且帮你写好了 commit
// 相当于帮你简化了代码
...mapMutations('m1', ['loginMutation']),
//不是modules的直接写 ...mapMutations( ['loginMutation'])
add(){
// console.log('add',this)
// console.log('add',this.$route.meta)
// this.$store.commit("m1/loginMutation")
// 或者下面的 先mapMutations 相当于帮你写了commit
this.loginMutation()
// this.$store.commit("m1/loginMutation")
// 和刚刚的思路 就是加上一个模块前缀 m1/
// this.$store.dispatch("m1/loginAction")
},
async getAll(){
// http://localhost:8080/
// 请求 http://122.51.238.153/getok.php
// let res=await this.$http.get("http://122.51.238.153/getok.php")
// console.log('res',res)
let res=await this.$http.get("/api/getok.php")
console.log('res',res)
},
addCount(){
// 让全局数据count+1
// 1 正常情况
// dispatch 触发action
// -》commit触发mutation
// -》在mutation修改全局数据
//2 其他情况 可以直接跳过action 但是必须mutation修改
// console.log('$store',this.$store)
// this.$store.dispatch( 'countAction' )
this.$store.commit("countMutation")
}
}
}
</script>Apakah logik penggunaannya?
Data yang ditulis dalam keadaan dalam stor ialah data global Semua komponen boleh menggunakan
untuk menggunakan logik. untuk mengendalikan global Data keadaan vuex
Dalam keadaan biasa, anda mesti menghantar (tindakan)--->tindakan untuk melakukan untuk mencetuskan mutasi--"Data global keadaan boleh diubah suai dalam mutasi tindakan--- >mutasi--->Ubah suai keadaan
Dalam kes lain, anda juga boleh melangkau tindakan dan pergi terus untuk melakukan mutasi--》Ubah suai keadaan data global
Bagaimanakah vuex mengurus data dengan munasabah, dan mutasi Perbezaan antara mutasi dan tindakan
Analisis: Soalan ini mengkaji pengurusan data dan reka bentuk struktur data dalam vuex, serta sebagai perbezaan antara mutasi dan tindakan: Pertama sekali, kita mesti menjelaskan prinsip yang sangat penting, iaitu, tidak semua data mesti diletakkan dalam vuex, kerana vuex mempunyai pepatah terkenal: Jika anda tidak tahu mengapa anda ingin menggunakan vuex, maka jangan gunakannya
Jadi apakah jenis data yang perlu diletakkan dalam vuex Pertama sekali, data ini mesti ada? kerap digunakan oleh berbilang komponen. Jika ia hanya digunakan oleh satu komponen, tidak perlu menggunakan vuex dan menggunakan vuexContoh: Nama panggilan, akaun, maklumat pengguna tapak web, maklumat peringkat sistem sedemikian boleh dipaparkan dan digunakan dalam perniagaan pada bila-bila masa Jika disimpan dalam komponen, ia akan diperoleh N kali, jadi
**解答**perlu diletakkan Dalam vuex, data peringkat sistem tidak boleh diletakkan dengan cara yang sama untuk menjadikan data kelihatan lebih hierarki, ia boleh direka bentuk seperti berikut,
**系统级别的数据**Struktur di atas, Sekali imbas, kita boleh memberitahu di mana kita harus mendapatkan data sistem, iaitu, tetapan data
{
// 系统消息
system: {
user: {},
setting: {}
}
}Jika sesetengah data perniagaan juga perlu dikongsi, sebaiknya klasifikasikannya mengikut maksud perniagaan khusus modul tersebut, seperti berikut
Seperti yang ditunjukkan dalam kod di atas, kami boleh membezakan dengan jelas data setiap modul, yang tidak akan menyebabkan kekeliruan dalam pengurusan data
{
// 系统消息
system: {
user: {},
setting: {}
},
product: {
productList: [], // 商品信息列表
productOrders: [] // 商品订单啊列表
}
}Perbezaan antara mutasi dan tindakanTidak seperti redux, yang hanya mempunyai satu tindakan, vuex mempunyai mutasi yang berasingan Ia percaya bahawa pengemaskinian data mesti segerak, iaitu, selagi kaedah serah data dipanggil, data boleh diubah suai dalam mutasi
keadaan => bertanggungjawab menyimpan keadaan
mutasi => Bertanggungjawab mengemas kini status secara serentak
, diserahkan kepada mutasi untuk kemas kini status
**数据快照**tindakan => Bertanggungjawab untuk mendapatkan data pemprosesan ( jika terdapat operasi tak segerak, ia mesti diproses dalam tindakan dan kemudian ke mutasi)Pengurusan modul modular Vuex, terdapat langkah berjaga-jaga apabila menggunakannya
Analisis: Soalan ini mengkaji penyelesaian modular apabila data yang diselenggara oleh vuex menjadi semakin kompleks
**解析**:使用单一的状态树，应用的所有状态都会**集中在一个比较大的对象**上面，随着项目需求的不断增加，状态树也会变得越来越臃肿，增加了状态树维护的复杂度,而且代码变得沉长；因此我们需要**modules(模块化)**来为我们的状态树**分隔**成不同的模块，每个模块拥有自己的state，getters，mutations，actions；而且允许每个module里面嵌套子module；如下：
store
├── index.js # 我们组装模块并导出 store 的地方
├── actions.js # 根级别的 action
├── mutations.js # 根级别的 mutation
├── state.js # 根级别的 state
└── modules
├── module1.js # 模块1的state树
└── module2.js # 模块2的state树上面的设计中, 每个vuex子模块都可以定义 state/mutations/actions
需要注意的是 我们原来使用
**vuex辅助函数**mapMutations/mapActions 引入的是 全局的的mutations 和actions , 并且我们vuex子模块 也就是module1,module2 ... 这些模块的aciton /mutation 也注册了全局,也就是如果 module1 中定义了 loginMutation, module2中也定义了 loginMutation, 此时, mutation就冲突了
如果重名,就报错了.....
如果不想冲突, 各个模块管理自己的action 和 mutation ,需要 给我们的子模块一个 属性
**namespaced: true**
那么 组件中怎么使用子模块的action 和 mutations
// 你可以将模块的空间名称字符串作为第一个参数传递给上述函数，这样所有绑定都会自动将该模块作为上下文
methods:{
...mapMutations('m1', ['loginMutation']),
add(){
console.log('add',this)
// this.$store.commit("m1/loginMutation")
// 或者下面的 先mapMutations 相当于帮你写了commit
// this.loginMutation()
}
}
// 这句话的意思是 直接 解构出 全局 m1模块下的 loginMutation
// 把loginMutation 放到this上 并且帮你写好了 commit
// 相当于帮你简化了代码
...mapMutations('m1', ['loginMutation']),
//不是modules的直接写 ...mapMutations( ['loginMutaton])store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 1 下载vuex 导入 use一下
// 2 new Vuex.Store
// 3 挂载到new vue上
export default new Vuex.Store({
state: {
// 在这里写的就是所有组件都能有 全局数据了
// 名字:值
// 如果我1000个全局数据 有可能重名
count:100
},
mutations: {
countMutation(state){
// state 就是那个全局state
console.log('mutation触发了',state)
state.count++
}
},
actions: {
// action对应的函数
countAction(obj){
console.log('action触发了',obj)
// obj对象 里面有commit
obj.commit("countMutation")
}
},
// modules 在store全局数据 是可以来分模块管理的
// 他可以用来区分每个不同模块的数据
// 15:10 上课
modules: {
// 模块:{ 一套state action mutation }
m1: {
namespaced: true,//开启命名空间大白话 他是m1下的 不会影响其他人
// 模块内容（module assets）
state: { // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
m1Name:"我是m1模块的m1Name"
},
actions: {
loginAction () {
console.log('m1的action')
} // -> dispatch('m1/loginAction')
},
mutations: {
loginMutation () {
console.log('loginMutation-执行啦')
} // -> commit('m1/loginMutation')
}
},
home:{
namespaced: true,
state:{
count:1
}
},
about:{
namespaced: true,
state:{
count:100
},
actions:{
}
},
}
})此题具体考查 Vuex虽然是一个公共状态, 但是公共状态还可以切分成若干个子状态模块, 也就是moduels,
解决当我们的状态树过于庞大和复杂时的一种解决方案. 但是笔者认为, 一旦用了vuex, 几乎 就认定该项目是较为复杂的
参考文档
https://vuex.vuejs.org/zh/guide/modules.html
组件是什么？组件是一段功能代码 ---大白话 就是一段html +js +css 你可以重复使用
封装轮播图 - 1 新建vue组件 2 Vue.component注册组件 3 在其他组件使用 标签名
参数： 可以传入数据 使用props接受 比如 数组 定时器时间等
分析: 本题考查 对于Vue组件化开发的熟练程度
解析: 首先明确 组件是本质是什么?
组件就是一个单位的HTML结构 + 数据逻辑 + 样式的 操作单元
Vue的组件 继承自Vue对象, Vue对象中的所有的属性和方法,组件可自动继承.
要封装一个组件,首先要明确该组件要做的具体业务和需求, 什么样的体验特征, 完成什么样的交互, 处理什么样的数据
明确上述要求之后, 着手模板的结构设计及搭建,也就是 常说的html结构部分, 先完成 静态的html结构
结构完成, 着手数据结构的设计及开发, 数据结构一般存储于组件的data属性 或者 vuex 状态共享的数据结构
数据设计完成/ 结构完成 接下来 完成数据和模块的结合 , 利用vuejs中指令和 插值表达式的特性 将静态结构
**动态化**展现的部分完成, 接下来完成
**交互部分**,即利用 组件的生命周期的钩子函数 和 事件驱动 来完成 逻辑及数据的处理与操作
最后组件完成,进行测试及使用
常用的组件属性 => data/ methods/filters/ components/watch/created/mounted/beforeDestroy/computed/props
常用组件指令: v-if/v-on/v-bind/v-model/v-text/v-once
分析: 此题考查 data的存在形式 解析: 我们在初步学习Vue实例化的时候写的代码时这个样子上面代码中的data 是一个对象, 但是我们在开发组件的时候要求data必须是一个带返回值的函数
new Vue({
el: '#app',
data: {
name: 'hello world'
}
})export default {
data () {
return {
name: '张三'
}
}
}为什么组件要求必须是带返回值的函数? 因为 我们的组件在实例化的时候, 会直接将data数据作用在视图上,对组件实例化, 会导致我们组件的data数据进行共享
好比 现在有两辆新车, 你一踩油门, 不光你的车往前车,另辆车也和你一样往前冲!
这显然不符合我们的程序设计要求, 我们希望组件内部的数据是相互独立的,且互不响应，所以 采用 return {} 每个组件实例都返回新对象实例的形式，保证每个组件实例的唯一性
更多编程相关知识，请访问：编程入门！！
Atas ialah kandungan terperinci Ringkaskan dan kongsi beberapa soalan asas temuduga bahagian hadapan tentang Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
