(1).vue基础介绍
1.vue是一个渐进式框架
响应式(vue核心)+vue组件化+vue Router + Vuex + vue CLI
2.vue的不同构建版本
而compiler就是将template 转换为render的
new Vue({
template:'<div></div>'
})
经过compiler
new Vue({
render(h){
return h('div',this.hi)
}
})3.vue.js的引入
<script src="node_modules/vue/dist/vue.js"></div>4.render创建html
new Vue({
render(h){
return h('div',['hello render function!'])
}
})new Vue({
render(h){
return h('div',{class:'test',attrs:{id:'testid'}},['hello render function!'])
}
})5.render/template/el优先级
如果要用template则必需使用full版本，data也是一样的，只有runder函数好使
顺序问题优先级为render>template>el(data)
<body>
<div id="app">
{{message}}
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data(){
return{
message:'Hello'
}
},
template : '<div>hello template</div>',
render(h){
return h('div',{class:'test',attrs:{id:'testid'}},['hello render function!'])
}
})
</script>
</body>6.{{}}
<div id = "app">
{{message}}
{{1+2}}
{{fn()}}
{{message === 'hello data' ? true : false}}
</div>为什么插值运算符可以写表达式不可以写if,因为最后会编译成一个函数，函数中的参数支持以上类型不支持if语句
(2).data传值响应式原理
1.defineProperty实现响应式
进入defineReactive方法->执行defineProperty函数->把data中的对象传入->depend方法依赖收集->addSub订阅->notify发布 就会完成响应
2.data对象嵌套过深的情况，Vue3对应的解决方案
如果嵌套过深，会一直递归将属性变为响应式数据，这样会导致性能浪费。
3.处理数组类型数据会出问题
如果data数据为数组，只能通过固定的方法来增改，如果通过像下标来访问，是不会生效的
数组不会默认是响应式数据，调用push这类方法会更新数组(因为重写了)，但是如果直接访问是没法更新视图
vm.nums[0] = 3 失效
vm.nums.length -- 数组会变但是不会响应
vm.$set(vm.nums,0,50) 成功
vm.$delete(vm.nums,1) 成功let vm = new Vue({
el:'#app',
data(){
return {
nums:[1,2,3,4,{name:'Mike'}]
}
}
})
vm.nums[3].name = 'Johen'
扫一扫
782
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
