插值表达式是vue最基础的数据绑定方式，仅支持返回值的javascript表达式，禁用语句、声明、异步操作及副作用；需防范null/undefined访问，html渲染须用v-html。
插值表达式是 Vue 最基础、最常用的数据绑定方式，掌握它等于打开了 Vue 开发的大门。只要理解它的语法边界和常见陷阱，基本不会报错，也不需要死记硬背。
插值表达式只能写 JavaScript 表达式，不能写语句
这是初学者最容易踩的坑。双大括号 {{ }} 里只允许写「能返回值」的表达式，比如：
-
{{ message }}（变量） -
{{ count + 1 }}（运算） -
{{ message.split('').reverse().join('') }}（方法链） -
{{ isActive ? 'active' : 'inactive' }}（三元运算）
但以下写法会直接报错或静默失败：
-
{{ if (count > 0) { return 'yes' } }}（if是语句，不是表达式） -
{{ let x = 1 }}（let是声明，不返回值） -
{{ console.log('hello') }}（虽然语法合法，但不推荐，且 Vue 3 中模板中禁止副作用）
避免访问 undefined 或 null 的属性
比如 {{ user.profile.name }}，如果 user 是空对象或 profile 为 null，就会报 Cannot read property 'name' of null/undefined。
解决办法有三种：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章