标签：vue set 01 笔试 list VUE params 组件 数据
vue的8个⽣命周期函数？
1. beforeCreated
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. beforeDestory
8. destoryed
v-show 与 v-if的区别？
1、v-show: 是否显示，元素肯定已经渲染在dom节点上，然后通过样式来控制是否显示。
2、v-if: 是否渲染，如果没有额外的样式控制，只要渲染就是显示的。v-if有⽐较⼤的渲染开销（符合条件要渲染到dom节点中，不符合条件要从dom节点中去掉元素）。当频繁执⾏条件时，不适合使⽤v-if，⽤v-show；反之执⾏条件的次数很少，使⽤v-if即可
v-for与v-if优先级？
v-for优先，对循环的每⼀项来执⾏v-if，根据v-if条件执⾏的结果再决定输出内容
v-for中的key的作⽤？
key的作⽤是标示⼀组兄弟节点中每⼀项的唯⼀性，在下次更新时进⾏⼆次元素⽐对，去定位元素是更新、删除、新增、移动等
vue中每个周期函数⼀般放置什么业务逻辑？
1、在组件加载时就需要发送的异步请求，可以放在beforeCreated或者created上
2、如果从路由获取⼀些数据来使⽤，可以放在created
3、如果要操作dom，放在mounted, 因为这个阶段是把前⾯创建的组件实例的dom结构 挂载 到了dom节点中
4、如果需要在组件更新后，需要发送数据给后台或者前台⾃⼰的⼀些存储，放在updated
5、如果需要在组件销毁时处理⼀些数据、定时器等，放在beforeDestoryed
vue中data为什么是function？
因为vue中内部使⽤的组件没有使⽤new Vue这种实例化的形式，不是创建⼀个新的实例，所以data数据需要进⾏区分，函数每次执⾏之间没有任何关系，所以使⽤函数来返回data数据，这样每次使⽤这个组件，组件的数据都只是这次的，下次再使⽤，下次数据跟这次的数据没有关系就不会相互影响了
vue中双向绑定的原理？
借助js中 Object.defineProperty(obj, 'a', {set: fn, get: fn}) 定义数据时可以对这个数据进⾏修饰，修饰的属性有：
1、value： 这个属性的值
2、writeable: 是否可写
3、configurable: 是否可配置
4、enumable: 是否可遍历
5、set: 设置数据
6、get: 获取数据
上面的6种装饰属性分为2组使用，第一组：1234；第二组：3456
Object.defineProperty(obj, 'a', {
set: function(n) {
a = n
document.getElementById('root').innerHTML = '<div>hello world</div>'
document.getElementById('abc').innerHTML = n
},
get: function() {
// 依赖分析和收集
return a
}
})
obj.a = 2 // this.abc = 123
console.log(a) // var b = obj.a
双向：
1. 视图view => 数据model：通过事件绑定的形式把数据从视图层传递到逻辑层
2. 数据model => 视图view：通过拦截setter getter来重新定义其中的逻辑，然后在模板解析阶段收集其中使⽤的数据（依赖收集），后续数据发⽣变化，会执⾏set⽅法的逻辑，set⽅法其中会根据上次依赖收集的结果去更新 使⽤当前变化的数据的那个template
keep-alive的作⽤和被keep-alive声明的组件的⽣命周期？
keep-alive作⽤是保持组件不销毁，⽤来处理要保持组件状态的那些场景；被keep-alive声明的组件不被销毁，⼀直存在，多两个⽣命周期，actived 激活和deatvied 不激活状态
vue组件间传值有哪些⽅式？
1、⽗⼦传值: props
2、⼦⽗传值: 回调
3、兄弟节点传值: $on 与$emit ，在触发事件时可以传递参数，参数会被监听事件的处理函数接收到
computed和watch的区别？
1、computed是⼀个计算属性，对⼀些基于data数据产⽣的数据进⾏计算，或者⻚⾯要使⽤的数据是⽐较复杂的，每次在模板中运算1是逻辑和结构混淆代码不分离不清晰2是每次都执⾏耗费性能，所以计算属性另⼀个特征是他能把计算结果缓存下来，下次的计算因⼦如果没有变化，那么直接返回上次缓存的值供组件使⽤
2、watch是监听数据的变化，执⾏⾃⼰的业务逻辑
3、共同点：都会监听他们使⽤的数据是否变化，但是作⽤倾向不同，watch也可以做computed做的事情，还可以去做其他事情：⽐如发送⽹络请求，存储本地数据、改变⻚⾯的ui结构、添加定时操作、跳转路由
vue中改变数组内索引的值，数据不更新，如何处理？
- vue对数据进⾏劫持，当数据变化时去更新⻚⾯上⽤到该数据的地⽅
- 数组的劫持⽐较例外，它只对数组本身进⾏劫持，并没有对数组中每⼀个元素进⾏劫
持，所以根据索引改变某项的值，不会触发setter，所以⻚⾯就得不到更新了。
- 解决⽅法：就是让vue知道数据变化了，使⽤splice⽅法改变数组或者this.$set或者
Vue.set来定义
data: function() {
return {
list: [1, 21, 3],
a: 1,
b: 'abc',
c: {aa: 11, bb: 22, cc: 33}
}
}
methods: {
handler: function() {
this.$set(this.list, 2, 33)
// Vue.set(this.list, 2, 35)
// this.list.splice(2, 1, 355)
}
}
vue中传参的⽅式？
1、使⽤中转
1、全局中转 window
2、如果是在组件内部中转，把数据寄存在this实例对象上
3、vuex也是⼀个中转⽅案，所有的组件都可以从这⾥拿数据和改变数据，vuex会制定⼀系列的规范和操作约束，让数据管理更加的灵活、⽅便操作
4. 本地存储，如果是需要⻓期存在的数据，使⽤localStorage；临时的数据使⽤sessionStorage
2、使用vue-router 进行传参
2-1、使用query查询词
// 在某些操作函数（⽐如点击某个元素）执⾏跳转
this.$router.push({
path: 'list',
query: {
phone: '15192407777',
}
})
// query参数就是url后⾯跟上?及后⾯的内容 => /list?phone=15192407777
// 在list⻚⾯获取参数的值：this.$route.query
2-2、使⽤params路径
1、注意路径是由多部分组成的，所以要使⽤path的话，必须把path拼接完整（例外的情况：可变部分是可有可⽆的）
this.$router.push({
// 如果可变部分的是可以没有的，那么就不需要添加了
path: 'info/' + 后⾯定义的可变部分的参数值,
})
// 在info⻚⾯获取参数: this.$route.params
// 错误演示： 如果想使⽤params传参，不要使⽤path，会导致params⽆效
this.$router.push({
path: 'info',
params: {
id: 11
}
})
// 正确演示： 使⽤name和params配合使⽤
this.$router.push({
name: 'info',
params: {
id: 11
}
})
标签：vue,set,01,笔试,list,VUE,params,组件,数据 来源： https://www.cnblogs.com/qingtianyu2015/p/16631968.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。