Vue简单认识回顾和计算属性
程序员文章站
2022-04-11 17:12:42
...
Vue简单认识回顾和计算属性
因为是换了一个视频学习，所以还是复习了一下前面的，(虽然才开始学习vue两三天)
认识vue:
-
简单认识一下vue.js
-
-
一些高级功能：
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM
-
编程范式：
Vue安装方式
-
CDN引入
-
下载和引入
-
NPM安装管理
Vuejs初体验
-
hello vuejs
- 声明式编程(数据和界面分离，数据更新界面不需要更改)
- 命令式编程
- 创建Vue对象的时候：传入一些参数：
- el:该属性决定了这个Vue对象挂载到哪一个元素
- data:该属性通常会存储一些数据(这些数据可能来自网络也可能从服务器加载来的)
-
vue列表展示
- 代码：
<body>
<div id="app">
<ul>
<li v-for="item in fruit">{{item}}</li>
</ul>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
massage:"水果",
fruit:["西瓜","葡萄","西柚","哈密瓜"]
}
})
</script>
</body>
-
结果：
-
案例：计数器
<body>
<div id="app">
<h2>当前计数：{{counter}}</h2>
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
counter=0
},
methods:{
add:function(){
this.counter++;
},
sub:function(){
this.counter--;
}
}
})
</script>
</body>
至于MVVM什么的在之前那个博客中已经介绍了，这里就新学了一个计算属性
计算属性
- 引例：(computed 属性默认只有 getter ，只在需要时提供一个 setter )
<body>
<div id="app">
<h2></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
lastName:"王"
firstName:"雪宝"
},
computed:{
// fellname:function(){
// return this.firstName+" "+this.lastName
//计算属性一般没有set方法，即只读属性
// }
fullName:{
// set: function(){
// }
get:function(){
return this.lastName+" "+this.firstName
}
}
}
})
</script>
</body>
- methods和computed
两种方式来动态当作方法来用的
+ 调用的时候，methods要加上（）
+ 可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值
+ 使用 methods ，在重新渲染的时候，函数总会重新调用执行
<body>
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>使用computed反转字符串: {{ reversedMessage }}</p>
<p>使用methods后反转字符串: {{ reversedMessage2() }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: '王雪宝!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
},
methods: {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
使用 computed 性能会更好，但是如果不希望缓存，可以使用 methods 属性
- 为了更好理解上面几句话methods和computed的区别：可以从下面例子及其结果进行分析：
- 例子
<body>
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
<p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
<p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
</div>
<script>
var cnt=1;
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
cnt+=1;
return cnt+this.message.split('').reverse().join('')
}
},
methods: {
reversedMessage2: function () {
cnt+=1;
return cnt+this.message.split('').reverse().join('')
}
}
})
</script>
</body>
- 结果：
- 原始字符串: Runoob!
- 计算后反转字符串: 2!boonuR
- 计算后反转字符串: 2!boonuR
- 使用方法后反转字符串: 3!boonuR
- 使用方法后反转字符串: 4!boonuR
- 解析：
可以看出cnt相当于全局变量在vm对象外面，在使用 reversedMessage 这个computed属性的时候，第一次会执行代码，得到一个值，以后再使用 reversedMessage 这个computed属性，因为 vm 对象没有发生改变，于是界面渲染就直接用这个值，不再重复执行代码。而 reversedMessage2 没有这个缓存，只要用一次，函数代码就执行一次，于是每次返回值都不一样。
上一篇： 我的 Python 编码规范